Packages
moon
2.79.13
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/pages/design/tabs_page.ex
defmodule MoonWeb.Pages.Design.TabsPage do
@moduledoc false
require Logger
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Examples.Design.TabsExample
alias Moon.Design.Tabs
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/tabs",
name: "Tabs"
}
]
)
data(tab_id, :integer, default: 1)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
title="Tabs"
is_aria_support
is_rtl_support
image="facing/components/tabs.png"
>
<p>Tabs to allow users to navigate easily between views within the same context.</p>
<p>
Each tab should contain content that is distinct from other tabs in a
set for example, tabs can present different sections of news,
different genres of music, or different themes of documents.
</p>
</ComponentPageDescription>
<Tabs id="anatomy-tabs" class="justify-between gap-6">
<h2 class="text-moon-24 font-medium">Anatomy</h2>
<Tabs.List tab_titles={["Long syntax", "Short syntax"]} class="w-auto" />
<Tabs.Panels>
<Tabs.Panel><Anatomy title={false}>{component_anatomy(:long)}</Anatomy></Tabs.Panel>
<Tabs.Panel><Anatomy title={false}>{component_anatomy(:short)}</Anatomy></Tabs.Panel>
</Tabs.Panels>
</Tabs>
<ExamplesList examples={[
TabsExample.Default,
TabsExample.WithPills,
TabsExample.WithSegments,
TabsExample.Sizes,
TabsExample.CustomSelected,
TabsExample.Wizard
]} />
<PropsTable module={Moon.Design.Tabs} />
<PropsTable module={Moon.Design.Tabs.List} />
<PropsTable module={Moon.Design.Tabs.Link} />
<PropsTable module={Moon.Design.Tabs.Pill} />
<PropsTable module={Moon.Design.Tabs.Segment} />
<PropsTable module={Moon.Parts.Wizard.Step} />
<PropsTable module={Moon.Design.Tabs.Tab} />
<PropsTable module={Moon.Design.Tabs.Panels} />
<PropsTable module={Moon.Design.Tabs.Panel} />
</Page>
"""
end
def component_anatomy(:long) do
"""
<Tabs>
<Tabs.List>
<Tabs.Tab>...</Tabs.Tab>
<Tabs.Tab>...</Tabs.Tab>
<Tabs.Tab>...</Tabs.Tab>
</Tabs.List>
<Tabs.Panels>
<Tabs.Panel>...</Tabs.Panel>
<Tabs.Panel>...</Tabs.Panel>
<Tabs.Panel>...</Tabs.Panel>
</Tabs.Panels>
</Tabs>
"""
end
def component_anatomy(:short) do
"""
<Tabs>
<Tabs.List tab_titles={...}/>
<Tabs.Panels>
<Tabs.Panel>...</Tabs.Panel>
<Tabs.Panel>...</Tabs.Panel>
<Tabs.Panel>...</Tabs.Panel>
</Tabs.Panels>
</Tabs>
"""
end
end