Packages
moon
2.88.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/examples/design/tabs_example/custom_selected.ex
defmodule MoonWeb.Examples.Design.TabsExample.CustomSelected do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Tabs
def render(assigns) do
~F"""
<Tabs id="tabs-ex-7">
<Tabs.List>
<Tabs.Tab class="hover:text-hit after:bg-hit" selected_class="text-hit after:scale-x-100">Green tab</Tabs.Tab>
<Tabs.Tab disabled>Disabled tab</Tabs.Tab>
<Tabs.Tab class="hover:text-hit after:bg-hit" selected_class="text-hit after:scale-x-100">Green tab</Tabs.Tab>
</Tabs.List>
</Tabs>
<Tabs id="tabs-ex-8">
<Tabs.List>
<Tabs.Pill class="hover:bg-hit/30" selected_class="bg-hit/30">Green pill</Tabs.Pill>
<Tabs.Pill disabled>Disabled pill</Tabs.Pill>
<Tabs.Pill class="hover:bg-hit/30" selected_class="bg-hit/30">Green pill</Tabs.Pill>
</Tabs.List>
</Tabs>
"""
end
def code() do
"""
<Tabs id="tabs-ex-7">
<Tabs.List>
<Tabs.Tab class="hover:text-hit after:bg-hit" selected_class="text-hit after:scale-x-100">Green tab</Tabs.Tab>
<Tabs.Tab disabled>Disabled tab</Tabs.Tab>
<Tabs.Tab class="hover:text-hit after:bg-hit" selected_class="text-hit after:scale-x-100">Green tab</Tabs.Tab>
</Tabs.List>
</Tabs>
<Tabs id="tabs-ex-8">
<Tabs.List>
<Tabs.Pill class="hover:bg-hit/30" selected_class="bg-hit/30">Green pill</Tabs.Pill>
<Tabs.Pill disabled>Disabled pill</Tabs.Pill>
<Tabs.Pill class="hover:bg-hit/30" selected_class="bg-hit/30">Green pill</Tabs.Pill>
</Tabs.List>
</Tabs>
"""
end
end