بنية القائمة
قائمة بسيطة، أقسام مجمّعة، لوحات متداخلة مسطّحة ومجمّعة، والمزيد.
الحد الأدنى
Menu
Combobox
Select
<.menu
class="menu"
items={[
%Corex.Tree.Item{
value: "edit",
label: "Edit"
},
%Corex.Tree.Item{
value: "duplicate",
label: "Duplicate"
},
%Corex.Tree.Item{
value: "delete",
label: "Delete"
}
]}
>
<:trigger>Actions</:trigger>
<:indicator>
<.heroicon name="hero-chevron-down" />
</:indicator>
</.menu>
مجمّع
Overlays
Menu
Dialog
Pickers
Combobox
Listbox
<.menu
class="menu"
items={[
%Corex.Tree.Item{
value: "edit",
label: "Edit",
group: "Actions"
},
%Corex.Tree.Item{
value: "duplicate",
label: "Duplicate",
group: "Actions"
},
%Corex.Tree.Item{
value: "account-1",
label: "Account 1",
group: "Accounts"
},
%Corex.Tree.Item{
value: "account-2",
label: "Account 2",
group: "Accounts"
}
]}
>
<:trigger>Actions</:trigger>
<:indicator>
<.heroicon name="hero-chevron-down" />
</:indicator>
</.menu>
متداخل
Listbox
Corex
Combobox
Date picker
Menu
Dialog
Tabs
<.menu
class="menu"
items={[
%Corex.Tree.Item{
value: "new-tab",
label: "New tab"
},
%Corex.Tree.Item{
value: "share",
label: "Share",
children: [
%Corex.Tree.Item{
value: "messages",
label: "Messages"
},
%Corex.Tree.Item{
value: "airdrop",
label: "Airdrop"
},
%Corex.Tree.Item{
value: "whatsapp",
label: "WhatsApp"
}
]
},
%Corex.Tree.Item{
value: "print",
label: "Print"
}
]}
>
<:trigger>Click me</:trigger>
</.menu>
متداخل مجمّع
Tabs
Corex
Overlays
Menu
Dialog
Pickers
Combobox
Date picker
<.menu
class="menu"
items={[
%Corex.Tree.Item{value: "tabs", label: "Tabs"},
%Corex.Tree.Item{
value: "corex",
label: "Corex",
children: [
%Corex.Tree.Item{value: "combobox", label: "Combobox", group: "Pickers"},
%Corex.Tree.Item{value: "date-picker", label: "Date picker", group: "Pickers"},
%Corex.Tree.Item{value: "menu", label: "Menu", group: "Overlays"},
%Corex.Tree.Item{value: "dialog", label: "Dialog", group: "Overlays"}
]
}
]}
>
<:trigger>Corex</:trigger>
<:indicator><.heroicon name="hero-chevron-down" /></:indicator>
<:nested_indicator><.heroicon name="hero-chevron-right" /></:nested_indicator>
</.menu>