Tabs
v0.0.10
mix mishka.ui.gen.component tabs
Overview of the Phoenix LiveView Tabs Component
The Mishka Chelekom Tabs component is a highly customizable Phoenix LiveView tool for organizing content in an intuitive tab-based interface. It is ideal for managing multiple sections of information or forms within a single page. This component supports both horizontal and vertical tab layouts, offering a wide range of styling options for colors, sizes, and border styles to match your app's design seamlessly.
Overview of the Phoenix LiveView Tabs Component
This Phoenix LiveView component also offers multiple tab styles, including active, inactive, or disabled states, making it easy to organize and navigate complex content. The flexibility in vertical and horizontal tab layouts ensures a responsive and visually appealing user experience, tailored to different use cases.
Base Variant
Base Variant
<!--Each tab needs a unique ID-->
<!--Each tab slot is related to a panel slot in order-->
<.tabs id="tabs-1">
<:tab></:tab>
<:tab></:tab>
<:tab></:tab>
<:panel></:panel>
<:panel></:panel>
<:panel></:panel>
</.tabs>Default Variant
The Mishka Chelekom tabs of the Mishka Chelekom Tabs component provides a simple and clean style where only the active tab’s color and border color are changed.
Default Variant
<!--Each tab needs a unique ID-->
<.tabs id="tabs-2" variant="default" color="natural"></.tabs>
<.tabs id="tabs-3" variant="default" color="primary"></.tabs>
<.tabs id="tabs-4" variant="default" color="secondary"></.tabs>
<.tabs id="tabs-5" variant="default" color="success"></.tabs>
<.tabs id="tabs-6" variant="default" color="warning"></.tabs>
<.tabs id="tabs-7" variant="default" color="danger"></.tabs>
<.tabs id="tabs-8" variant="default" color="info"></.tabs>
<.tabs id="tabs-9" variant="default" color="silver"></.tabs>
<.tabs id="tabs-10" variant="default" color="misc"></.tabs>
<.tabs id="tabs-11" variant="default" color="dawn"></.tabs>Pills Variant
The Pills Variant of the Mishka Chelekom Tabs component features an active tab with distinct background and text color changes, creating a sleek, pill-like shape. This variant offers customizable border radius options, giving it a modern, clean look that seamlessly fits into different design styles while clearly indicating the active tab.
Pills Variant
<!--Each tab needs a unique ID-->
<.tabs id="tabs-12" variant="pills" color="natural"></.tabs>
<.tabs id="tabs-13" variant="pills" color="primary"></.tabs>
<.tabs id="tabs-14" variant="pills" color="secondary"></.tabs>
<.tabs id="tabs-15" variant="pills" color="success"></.tabs>
<.tabs id="tabs-16" variant="pills" color="warning"></.tabs>
<.tabs id="tabs-17" variant="pills" color="danger"></.tabs>
<.tabs id="tabs-18" variant="pills" color="info"></.tabs>
<.tabs id="tabs-19" variant="pills" color="silver"></.tabs>
<.tabs id="tabs-20" variant="pills" color="misc"></.tabs>
<.tabs id="tabs-21" variant="pills" color="dawn"></.tabs>Size prop
The size attribute in the Mishka Chelekom tabs component offers the following options: extra_small, small, medium, large, and extra_large.
Size prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-22" size="extra_small"></.tabs>
<.tabs id="tabs-23" size="small"></.tabs>
<.tabs id="tabs-24" size="medium"></.tabs>
<.tabs id="tabs-25" size="large"></.tabs>
<.tabs id="tabs-26" size="extra_large"></.tabs>Border prop
The border attribute in the Mishka Chelekom tabs component offers various size options, including extra_small, small, medium, large, and extra_large.
Border prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-27" border="extra_small"></.tabs>
<.tabs id="tabs-28" border="small"></.tabs>
<.tabs id="tabs-29" border="medium"></.tabs>
<.tabs id="tabs-30" border="large"></.tabs>
<.tabs id="tabs-31" border="extra_large"></.tabs>Rounded prop
The rounded prop offers values like extra_small, small, medium, large, and extra_large. It only applies on pills variant.
Rounded prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-32" rounded="extra_small"></.tabs>
<.tabs id="tabs-33" rounded="small"></.tabs>
<.tabs id="tabs-34" rounded="medium"></.tabs>
<.tabs id="tabs-35" rounded="large"></.tabs>
<.tabs id="tabs-36" rounded="extra_large"></.tabs>Padding prop
The padding prop offers values such as extra_small, small, medium, large, and extra_large. You can Change padding within tabs panels.
Padding prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-37" padding="extra_small"></.tabs>
<.tabs id="tabs-38" padding="small"></.tabs>
<.tabs id="tabs-39" padding="medium"></.tabs>
<.tabs id="tabs-40" padding="large"></.tabs>
<.tabs id="tabs-41" padding="extra_large"></.tabs>Font Weight prop
The font_weight prop allows developers to customize the font weight of the text inside the tabs by using Tailwind CSS's built-in font weight classes. For instance, users can apply classes like font-normal, font-bold, or font-extrabold, among others, to adjust the thickness and emphasis of the text. This flexibility enables developers to ensure that the tabs’s text aligns with the overall typography and design of their application.
Font Weight prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-42" font_weight="font-medium"></.tabs>
<.tabs id="tabs-43" font_weight="font-black"></.tabs>
<.tabs id="tabs-44" font_weight="font-light"></.tabs>Tab gap prop
The gap prop in the Mishka Chelekom Tabs component allows you to control the spacing between individual tabs.
Tab gap prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-45" gap="extra_small"></.tabs>
<.tabs id="tabs-46" gap="small"></.tabs>
<.tabs id="tabs-47" gap="medium"></.tabs>
<.tabs id="tabs-48" gap="large"></.tabs>
<.tabs id="tabs-49" gap="extra_large"></.tabs>
<.tabs id="tabs-50" vertical gap="extra_small"></.tabs>
<.tabs id="tabs-51" vertical gap="small"></.tabs>
<.tabs id="tabs-52" vertical gap="medium"></.tabs>
<.tabs id="tabs-53" vertical gap="large"></.tabs>
<.tabs id="tabs-54" vertical gap="extra_large"></.tabs>Tab vertical prop
The vertical prop in the Mishka Chelekom Tabs component is a boolean attribute that controls the orientation of the tabs. When set to true, the tabs are displayed vertically, stacking one on top of the other. If set to false or left out, the tabs maintain their default horizontal layout. This simple boolean toggle allows you to easily adjust the tab orientation to suit your design needs, making it versatile for different layouts, such as sidebars or narrow spaces, without requiring significant changes to the overall structure.
Tab vertical prop
<!--Each tab needs a unique ID-->
<.tabs id="tabs-55" vertical></.tabs>
<.tabs id="tabs-56" variant="pills" vertical></.tabs>Tab placement prop
The placement attribute in the Mishka Chelekom Tabs component, when used in vertical orientation, allows you to align the tabs to different positions within the container. By default, it's set to start, aligning the tabs at the top. You can modify it to center to center the tabs or end to place them at the bottom. This gives you flexibility in organizing the vertical layout, making it easy to adapt the component to various design requirements.
Tab placement prop
<!--Each tab needs a unique ID-->
<!--Start is default-->
<.tabs id="tabs-57" vertical placement="start"></.tabs>
<.tabs id="tabs-58" vertical placement="end"></.tabs>Tab slot
You can easily add tab buttons using the tab slot in the Mishka Chelekom Tabs component, without needing to create new elements.
Tab slot
<!--Each tab needs a unique ID-->
<.tabs id="tabs-59">
<:tab>Profile</:tab>
<:tab>Tickets</:tab>
<:tab>Settings</:tab>
</.tabs>Scrollable prop
Scrollable trigger list: pass scrollable to keep the trigger list on a single line/column and let it scroll instead of wrapping. For horizontal tabs the trigger row scrolls horizontally; for vertical tabs the trigger column scrolls vertically. Useful on mobile or when there are many tabs in a narrow / short container. The scrollbar itself is hidden, so users scroll via touch / trackpad / wheel.
Note: needs a bounded size. the scroll only engages when the tab list overflows its container, so the developer must constrain that size. For horizontal, give the parent a max-width (or use a narrow column); for vertical, set a fixed height on the <.tabs> element via class (e.g. class="h-56"). Without a height there is nothing to overflow against and the tabs render at their natural size.
This wraps the trigger list in the scroll_area component, so make sure scroll_area is generated alongside tabs (it is listed as a required dependency).
Tab slot icons props
The icon, icon_class, and icon_position are key props of the tab slot in the Mishka Chelekom Tabs component, designed to enhance the visual appeal and functionality of each tab. The icon prop allows you to display an icon alongside the tab label, improving user recognition. With the icon_class prop, you can apply custom CSS classes to style the icon, giving you control over its appearance. Additionally, the icon_position prop lets you decide whether the icon appears on the left or right of the tab label, offering flexibility in layout design.
Tab slot badge props
The badge property for the tab slot is a versatile feature that enhances the visual representation of tabs by adding badges. This property is accompanied by several supporting attributes to customize the appearance and functionality of the badge. The badge_color attribute allows you to specify the color of the badge to match your design theme. The badge_position attribute controls where the badge is placed relative to the tab, ensuring flexibility in design layout. The badge_size attribute determines the size of the badge, allowing for variations such as small, medium, or large badges based on your requirements. Finally, the badge_variant attribute provides an option to define the variant of the badge, such as solid, outlined, or subtle styles, adding further customization options to suit different use cases.
Tab slot badge props
<.tabs id="tabs-60">
<:tab
badge="hero-home"
badge_variant="bordered"
badge_size="size-8">
</:tab>
<:tab
badge="hero-home"
badge_variant="default"
badge_size="extra_large">
</:tab>
<:tab
badge="hero-home"
badge_variant="base"
badge_position="end">
</:tab>
<:tab
badge="hero-home"
badge_variant="outline"
badge_color="info"
badge_position="end">
</:tab>
</.tabs>Tab slot badge props
<!--Each tab needs a unique ID-->
<!--icon_position default is start-->
<.tabs id="tabs-61">
<:tab icon="hero-home" icon_class="your_classes"></:tab>
<:tab icon="hero-home" icon_class="your_classes"></:tab>
<:tab icon="hero-home" icon_class="your_classes" icon_position="end"></:tab>
<:tab icon="hero-home" icon_class="your_classes" icon_position="end"></:tab>
</.tabs>Tab slot active props
The active prop in the Mishka Chelekom Tabs component determines which tab is currently active. By default, the first tab is set to be active unless otherwise specified. When the active prop is set to true for a specific tab, that tab becomes highsilvered, and its corresponding content is displayed, ensuring users know which tab is currently in focus. This prop helps manage the visibility and navigation between different tab contents effectively.
Tab slot active props
<!--Each tab needs a unique ID-->
<.tabs id="tabs-62">
<:tab></:tab>
<:tab active></:tab>
<:tab></:tab>
</.tabs>
<.tabs id="tabs-63">
<:tab active></:tab>
<:tab></:tab>
<:tab></:tab>
</.tabs>
<.tabs id="tabs-64">
<:tab active></:tab>
<:tab></:tab>
<:tab active></:tab>
</.tabs>Tab panel slot
The panel slot in the Mishka Chelekom Tabs component is required and serves as the container for the content associated with each tab. This slot displays the content that corresponds to the active tab, ensuring that users see the relevant information when they interact with different tabs.
Tab panel slot
<!--Each tab needs a unique ID-->
<!--Each tab slot is related to a panel slot in order-->
<.tabs id="tabs-65">
<:tab></:tab>
<:tab></:tab>
<:tab></:tab>
<:panel></:panel>
<:panel></:panel>
<:panel></:panel>
</.tabs>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | A unique identifier is used to manage state and interaction |
variant
|
string
|
base
|
defaultpillsnav_pillsbase
| No | Determines the style |
color
|
string
|
base
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
none
| — | No | Determines border style |
tab_border_size
|
string
|
small
| — | No | Determines border style for tab |
full_width_tab
|
boolean
|
false
| — | No | Determines border style for tab |
hide_list_border
|
boolean
|
false
| — | No | Determines border style for tab |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
gap
|
string
| — | — | No | Determines gap for tabs |
rounded
|
string
|
none
| — | No | Determines the border radius |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
padding
|
string
|
extra_small
|
extra_smallsmallmediumlargenone
| No | Determines padding for items |
content_padding
|
string
|
extra_small
| — | No | Determines padding for items |
triggers_position
|
string
|
extra_small
| — | No | Determines the positioning of tab triggers |
vertical
|
boolean
|
false
| — | No | Determines whether element is vertical |
placement
|
string
|
start
| — | No | Determines placement of vertical tabs (start, end) |
scrollable
|
boolean
|
false
| — | No | When true, wraps the tab trigger list in a scroll area (horizontal scroll for horizontal tabs, vertical scroll for vertical tabs). Useful on mobile or when tabs exceed the container size. Requires the `scroll_area` component to also be generated. |
class
|
any
| — | — | No | Custom CSS class for additional styling |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
tab
| Yes | — |
panel
| No | — |
Attributes of the tab slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
icon
|
string
| — | — | No | Icon displayed alongside of an item |
class
|
any
| — | — | No | Custom CSS class for additional styling |
padding
|
string
| — | — | No | Determines padding for items |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
icon_position
|
string
| — | — | No | Determines icon position |
active
|
boolean
| — | — | No | Indicates whether the element is currently active and visible |
badge
|
string
| — | — | No | Add badge to tab |
badge_color
|
string
| — | — | No | badge color |
badge_position
|
string
| — | — | No | badge position |
badge_size
|
string
| — | — | No | badge size |
badge_variant
|
string
| — | — | No | badge color variant |
on_select
|
any
| — | — | No | Custom JS module for on_select action |
Attributes of the panel slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultpillsnav_pillsbase
|
--color
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargenone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component tabs