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> 

Change the options!




<x-btui-dropdown text="Click Me" align="left" size="md" icon="false"> </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