Dropdown
A blade component for Dropdown
This is the simple dropdown functional component and it has one slot and three attributes with default values.
// dropdown wrap component<x-btui-dropdown text="Click"> // dropdown link component <a> Home </a> <a> Profile </a> <a> Settings </a> </x-btui-dropdown> # Text
This is the trigger element. In default, the Trigger text slot has no styles but some padding is added, So, we can use it in all locations! If you need to add style use class or style attribute.
<x-btui-dropdown> <x-slot name="text"> <i class="fa fa-bars"> </i> </x-slot> </x-btui-button> Add css classes!
<x-btui-dropdown class="bg-white shadow border"> </x-btui-dropdown> Add css Styles!
<x-btui-dropdown style="backgroud:white;"> </x-btui-dropdown> # Size
This attribute defines the size for the dropdown component and it has a default value and that is md. It controls only trigger element. Available options are sm, md, lg, xl.
<x-btui-dropdown size="md"> </x-btui-dropdown> # Icon
This attribute defines the icon visibility and the default value is false. Set true to show the icon.
<x-btui-dropdown :icon="false"> </x-btui-dropdown> # Align
Dropdown links alignment!
when the links are overflowed you must use this attribute to works fine!
<x-btui-dropdown text="Click Me" align="left"> </x-btui-dropdown> See available options! (* means required)
| name | type | default | options |
|---|---|---|---|
| Text* | Slot | - | - |
| Size | String | md | sm, md, lg, xl |
| Icon | Boolean | true or false | - |
| Aling | String | left | left or right |
