صندوق القائمة
اختر عنصراً واحداً أو أكثر من قائمة.
Hex doc
Phoenix
الحد الأدنى
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"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])
}>
<:label>Choose a country</:label>
</.listbox>
مع indicator
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"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])
}>
<:label>Choose a country</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
مجمّع
Europe
France
Belgium
Germany
Asia
Japan
China
North America
USA
<.listbox class="listbox" items={
Corex.List.new([
%{label: "France", value: "fra", group: "Europe"},
%{label: "Belgium", value: "bel", group: "Europe"},
%{label: "Germany", value: "deu", group: "Europe"},
%{label: "Japan", value: "jpn", group: "Asia"},
%{label: "China", value: "chn", group: "Asia"},
%{label: "USA", value: "usa", group: "North America"}
])
}>
<:label>Choose a country</:label>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
موسّع
<.listbox class="listbox" items={
Corex.List.new([
%{label: "France", value: "fra"},
%{label: "Belgium", value: "bel"},
%{label: "Germany", value: "deu"},
%{label: "Netherlands", value: "nld"},
%{label: "Switzerland", value: "che"},
%{label: "Austria", value: "aut"}
])
}>
<:label>Country of residence</:label>
<:item :let={%{item: entry}}>
<Flagpack.flag name={String.to_atom(entry.value)} />
{entry.label}
</:item>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>
موسّع مجمّع
Europe
Asia
<.listbox
class="listbox"
aria_label="Extended grouped countries"
items={
Corex.List.new([
%{label: "France", value: "fra", group: "Europe"},
%{label: "Belgium", value: "bel", group: "Europe"},
%{label: "Germany", value: "deu", group: "Europe"},
%{label: "Japan", value: "jpn", group: "Asia"},
%{label: "China", value: "chn", group: "Asia"},
%{label: "South Korea", value: "kor", group: "Asia"}
])
}
>
<:item :let={%{item: entry}}>
<Flagpack.flag name={String.to_atom(entry.value)} />
{entry.label}
</:item>
<:item_indicator><.heroicon name="hero-check" /></:item_indicator>
</.listbox>