EssenceUI.Components.TabNav (Essence UI v0.2.0)

A set of links for navigating between different views.

Themed TabNav component. Use TabNav for navigation links that styled like tabs.

Examples

<.tab_nav>
  <.tab_nav_link href="/account" active>Account</.tab_nav_link>
  <.tab_nav_link href="/documents">Documents</.tab_nav_link>
  <.tab_nav_link href="/settings">Settings</.tab_nav_link>
</.tab_nav>

<.tab_nav color="blue" size="1">
  <.tab_nav_link href="/overview" active>Overview</.tab_nav_link>
  <.tab_nav_link href="/details">Details</.tab_nav_link>
</.tab_nav>

Summary

Functions

tab_nav(assigns)

TabNav root component.

tab_nav_link(assigns)

Individual link within TabNav.

Functions

tab_nav(assigns)

TabNav root component.

Attributes

size (:string) - Defaults to "2". Must be one of "1", or "2".
wrap (:string) - Flex wrap. Responsive supported. Must be one of "nowrap", "wrap", or "wrap-reverse".
justify (:string) - Justify content. Responsive supported. Must be one of "start", "center", or "end".
color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
high_contrast (:boolean) - Whether to increase color contrast with the background.
class (:string) - Defaults to nil.
style (:string) - Defaults to nil.
m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
Global attributes are accepted.

Slots

inner_block (required)

tab_nav_link(assigns)

Individual link within TabNav.

Attributes

href (:string) - Defaults to nil.
as (:string) - Defaults to "a".
active (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
style (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)