Tabs

A blade component for Tabs

The component for basic tab functionality with basic style. This component has five attributes and four have default values.

<x-btui-tabs tabs="main,content,more">   <x-slot name="main">     main - content goes here!  </x-slot>   <x-slot name="content">     content - content goes here!  </x-slot>   <x-slot name="more">     more - content goes here!  </x-slot> </x-btui-tabs> 

# tabs

Tab name should be declared in this attribute and separated by a comma (,) . Then this component will generate a slot with the name of the tab

<x-btui-tabs tabs="main,content,more">   <x-slot name="main"> </x-slot>   <x-slot name="content"> </x-slot>   <x-slot name="more"> </x-slot> </x-btui-tabs> 

# selected

Set the default tab by defining the name of the tab in this attribute.

<x-btui-tabs tabs="main,content,more" selected="content"> </x-btui-tabs> 

# align

Set the alignment of the tabs by the available options such as start, center, end. default is start

<x-btui-tabs tabs="main,content,more" align="start"> </x-btui-tabs> 

# color

8 primary colors availbale for this component and default is gray.

<x-btui-tabs tabs="main,content,more" color="gray"> </x-btui-tabs> 

# tab-content-class

The style for tab content. default is empty.

<x-btui-tabs tabs="main,content,more" tab-content-class=""> </x-btui-tabs> 

Change the options!

Result:

main
content
more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex ex, luctus et sapien vel, hendrerit varius sapien. Curabitur enim quam, molestie vel neque vitae, feugiat viverra ante. Integer ornare pharetra ipsum at pretium. Sed a tristique erat, sit amet iaculis nisi. Ut blandit, dolor at egestas convallis, turpis velit finibus orci, lobortis luctus mauris enim nec diam. Donec vestibulum ipsum sapien, et tincidunt tortor cursus id. Maecenas pharetra enim a ligula vestibulum facilisis. Nullam est enim, rhoncus id accumsan et, aliquet ut est.
Etiam mollis consectetur tortor, eget elementum felis malesuada a. Sed accumsan orci id vestibulum molestie. Nullam at euismod velit, vel aliquam ligula. Proin imperdiet non odio sit amet rutrum. Sed semper dignissim molestie. Sed sed blandit arcu. Pellentesque et venenatis magna. Sed tempus congue vulputate. Mauris eleifend quis neque in aliquet. Nam eros mi, sollicitudin et venenatis quis, fringilla quis felis.
Ut facilisis quis dui gravida semper. Curabitur vel efficitur elit, id blandit sapien. Nam in lacus in erat finibus pulvinar ut at sem. In nec eros ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc id fermentum nulla. Nunc fringilla mi nisl. In ipsum sapien, convallis vel faucibus id, semper non diam. Mauris vel turpis consectetur, porttitor sem non, vulputate ante. Proin interdum facilisis velit, ac vehicula nibh blandit in.

See available options! (* means required)

name type default options
Tabs* String - -
Selected String - -
Align String start start, center, end
Color String gray gray, green, red, pink, yellow, indigo, blue, purple
Tab-content-class String - -