Packages
moon
2.77.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/pages/design/form/combobox_page.ex
defmodule MoonWeb.Pages.Design.Form.ComboboxPage do
@moduledoc false
require Logger
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.Page
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.Form.ComboboxExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/form/combobox",
name: "Combobox"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_in_progress
is_rtl_support
is_aria_support
title="Combobox"
image="facing/components/dropdown.png"
>
<p>An input that behaves similarly to a dropdown, with the addition of a free text input to filter options.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
ComboboxExample.Default,
ComboboxExample.Multiple
]} />
<PropsTable module={Moon.Design.Form.Combobox} />
<PropsTable module={Moon.Design.Dropdown.Input} />
</Page>
"""
end
defp component_anatomy do
"""
<Form>
<Form.Field>
<Form.Combobox options={...} />
</Form.Field>
</Form>
"""
end
end