<.dropdown id="dropdown-single-default" label="Dropdown"> <.dropdown_item value="1" label="Item 1" /> <.dropdown_item value="2" label="Item 2"><:right_icon><.chevron_right /></:right_icon></.dropdown_item> <.dropdown_item value="3" label="Item 3" secondary_text="Foo" /> <.dropdown_item value="4" label="Item 4"><:left_icon><.category /></:left_icon></.dropdown_item> <.dropdown_item value="5" label="Item 5" /> </.dropdown>
<.dropdown id="dropdown-single-large-items" label="Dropdown with large items"> <.dropdown_item value="1" label="Item 1" size="large"> <:left_icon><.category /></:left_icon> </.dropdown_item> <.dropdown_item value="2" label="Item 2" size="large" right_icon={false}> <:left_icon><.category /></:left_icon> </.dropdown_item> <.dropdown_item value="3" label="Item 3" size="large" secondary_text="Foo"> <:left_icon><.category /></:left_icon> </.dropdown_item> <.dropdown_item value="4" label="Item 4" size="large"> <:left_icon><.category /></:left_icon> </.dropdown_item> <.dropdown_item value="5" label="Item 5" size="large"> <:left_icon><.category /></:left_icon> </.dropdown_item> </.dropdown>
<.dropdown id="dropdown-single-with-icon" label="Dropdown"> <:icon><.category /></:icon> <.dropdown_item value="1" label="Item 1"/> </.dropdown>
<.dropdown id="dropdown-single-with-secondary-text" label="Date" secondary_text="Order by"> <.dropdown_item value="1" label="Item 1" secondary_text="Foo"/> </.dropdown>
<.dropdown id="dropdown-single-with-icon-and-secondary-text" label="Date" secondary_text="Order by" > <:icon><.category /></:icon> <.dropdown_item value="1" label="Item 1" secondary_text="Foo"/> </.dropdown>
<.dropdown id="dropdown-single-with-hint" label="Dropdown" hint="This is a hint"> <.dropdown_item value="1" label="Item 1"/> </.dropdown>