صندوق القائمة · الحدث
Selected-item colors, density, and width via modifier classes and Tailwind max-w-* on the listbox root (vertical by default; horizontal uses a wider default max width).
Hex doc
Phoenix
اللون
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Default</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--accent" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Accent</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--brand" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Brand</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--alert" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Alert</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--info" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Info</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--success" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Success</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
الحجم
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox listbox--sm" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>SM</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>MD</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--lg" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>LG</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox listbox--xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])}>
<:label>XL</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
أقصى عرض
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
France
Belgium
Germany
Netherlands
Switzerland
Austria
<.listbox class="listbox max-w-2xs" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-md" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
<.listbox class="listbox max-w-2xl" items={Corex.List.new([%{label: "France", value: "fra"}, %{label: "Belgium", value: "bel"}, %{label: "Germany", value: "deu"}, %{label: "Netherlands", value: "nld"}])} value={["fra"]}>
<:label>Label</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>