Table of Contents
v0.0.10
mix mishka.ui.gen.component table_content
Overview of Table of Contents Phoenix LiveView component
The Mishka Chelekom Table of Contents component is a flexible and customizable Phoenix LiveView solution for organizing and displaying a navigable list of sections within a page.
Overview of Table of Contents Phoenix LiveView component
This Phoenix LiveView component supports responsive design, customizable styles, and smooth scrolling to ensure a seamless navigation experience. Perfect for enhancing the readability and usability of your content-heavy pages.
Table content variants and colors
The table content component supports multiple style variants, including default, base, gradient, outline, bordered, and transparent. It also offers a variety of colors such as natural, white, primary, secondary, success, warning, danger, info, silver, dark, misc, and dawn, providing extensive flexibility to match any design need.
Table content variants and colors
<.table_content color="white" variant="default"></.table_content>
<.table_content color="primary" variant="bordered"></.table_content>
<.table_content color="secondary" variant="outline"></.table_content>
<.table_content color="dark" variant="default"></.table_content>
<.table_content color="success" variant="bordered"></.table_content>
<.table_content color="warning" variant="outline"></.table_content>
<.table_content color="danger" variant="default"></.table_content>
<.table_content color="info" variant="bordered"></.table_content>
<.table_content color="silver" variant="outline"></.table_content>
<.table_content color="misc" variant="default"></.table_content>
<.table_content color="dawn" variant="bordered"></.table_content>
<.table_content color="silver" variant="outline"></.table_content>
<.table_content color="dawn" variant="gradient"></.table_content>Rounded prop in Phoenix LiveView table content Component
The rounded prop offers values like extra_small, small, medium, large, and extra_large.
Rounded prop in Phoenix LiveView table content Component
<.table_content rounded="extra_small"></.table_content>
<.table_content rounded="small"></.table_content>
<.table_content rounded="medium"></.table_content>
<.table_content rounded="large"></.table_content>
<.table_content rounded="extra_large"></.table_content>Border prop
The border prop offers values like extra_small, small, medium, large, and extra_large.
Border prop
<.table_content border="extra_small"></.table_content>
<.table_content border="small"></.table_content>
<.table_content border="medium"></.table_content>
<.table_content border="large"></.table_content>
<.table_content border="extra_large"></.table_content>Size prop
The size prop offers values such as extra_small, small, medium, large, and extra_large.
Size prop
<.table_content size="extra_small"></.table_content>
<.table_content size="small"></.table_content>
<.table_content size="medium"></.table_content>
<.table_content size="large"></.table_content>
<.table_content size="extra_large"></.table_content>Space prop
The space prop offers values such as extra_small, small, medium, large, and extra_large.
Space prop
<.table_content space="extra_small"></.table_content>
<.table_content space="small"></.table_content>
<.table_content space="medium"></.table_content>
<.table_content space="large"></.table_content>
<.table_content space="extra_large"></.table_content>Padding prop
The padding prop offers values such as extra_small, small, medium, large, and extra_large.
Padding prop
<.table_content padding="extra_small"></.table_content>
<.table_content padding="small"></.table_content>
<.table_content padding="medium"></.table_content>
<.table_content padding="large"></.table_content>
<.table_content padding="extra_large"></.table_content>
<.table_content padding="double_large"></.table_content>
<.table_content padding="triple_large"></.table_content>
<.table_content padding="quadruple_large"></.table_content>Title prop
You can add a title to your Table of Contents component by using the title attribute in the table_content component. This adds a clear heading, helping users understand the content. If omitted, the content is displayed without a header, giving you flexibility in design.
Title prop
<.table_content title="title of table-content"></.table_content>Animated prop
The animated attribute is a boolean and defaults to false. When set to true, it adds the Tailwind scroll-smooth class to the HTML tag, enabling smooth scrolling, even if the class isn’t added manually to your application.
Animated prop
<.table_content animated></.table_content>Content item component
The content_item component represents a single content item with optional custom styling. It supports @active for bolding, @font_weight, and additional @class for custom styles. If an icon is provided via @icon.
Content item component
<.table_content >
<.content_item link_title="Home" link="/path" />
<.content_item link_title="Overview" link="/path" />
<.content_item link_title="Slots" link="/path" />
</.table_content>Content item title prop
The title prop in the content_item component allows you to add a title to a group of items when using content_wrapper inside content_item. By setting the title, you can label each group, making it easier to organize and structure multiple content items under a specific heading. This helps improve readability and user navigation, especially when dealing with nested or grouped content.
Content item title prop
<.table_content>
<.content_item title="your_title">
<.link patch="/path"></.link>
</.content_item>
<.content_item title="your_title">
<.link patch="/path"></.link>
</.content_item>
<.content_item title="your_title">
<.link navigate="/path"></.link>
</.content_item>
</.table_content>Content item icon and icon class props
The icon prop displays an icon alongside the content, supporting Heroicons. You can customize the icon's appearance using the icon_class prop to apply specific CSS classes for size, color, and styling.
Content item icon and icon class props
<.table_content>
<.content_item icon="hero-home" icon_class="your_class">
<.link patch="/path"></.link>
</.content_item>
</.table_content>Content item active prop
The active attribute is a boolean used to indicate whether the current item is selected or active. When set to true, it applies specific styles (like bold text) to visually highlight the item as active or currently selected. By default, it's set to false.
Content item active prop
<.table_content>
<.content_item active>
<.link patch="/path"></.link>
</.content_item>
<.content_item>
<.link patch="/path"></.link>
</.content_item>
</.table_content>Content item font weight prop
The font_weight attribute allows you to apply custom font weight to a content item by using any Tailwind CSS font weight classes. You can set values like font-light, font-normal, or font-bold to control the thickness of the text, giving you flexibility in how the content is displayed.
Content item font weight prop
<.table_content>
<.content_item font_weight="font-thin">
<.link patch="/path"></.link>
</.content_item>
<.content_item font_weight="font-bold">
<.link patch="/path"></.link>
</.content_item>
</.table_content>Item slot
The item slot is designed for adding custom content and links within a component. It simplifies the process of integrating dynamic content into the component without needing to rely on the more complex content_item slot. By using the item slot, you can easily define and display items such as titles, icons, or links, making the component more flexible and user-friendly. This approach is especially useful when you want to customize individual elements with attributes like class, title, or active state, giving you more control over the presentation and behavior of your content.
Item slot
<.table_content >
<:item link_title="Home" link="/path"></:item>
<:item link_title="Overview" link="/path"></:item>
<:item link_title="Slots" link="/path"></:item>
</.table_content>
<.table_content >
<:item>
<.link patch="/path">Home</.link>
</:item>
<:item>
<.link patch="/path">Overview</.link>
</:item>
<:item>
<.link patch="/path">Slots</.link>
</:item>
</.table_content>Nested content
Nested content
<.table_content>
<.content_item title="Table content props">
<.content_wrapper>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Overview</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Color and Variants</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Space</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Padding</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Rounded</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Size</.link>
</.content_item>
</.content_wrapper>
</.content_item>
<.content_item title="Table content item props">
<.content_wrapper>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Overview</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Color and Variants</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Space</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Padding</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Rounded</.link>
</.content_item>
<.content_item icon="hero-chevron-right">
<.link patch="/path">Size</.link>
</.content_item>
</.content_wrapper>
</.content_item>
</.table_content>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
title_class
|
string
| — | — | No | Custom CSS class for additional styling to title |
title
|
string
| — | — | No | Specifies the title of the element |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
variant
|
string
|
base
|
outlinedefaultborderedtransparentgradientbase
| No | Determines the style |
space
|
string
| — |
extra_smallsmallmediumlargeextra_large
| No | Space between items |
animated
|
boolean
|
false
| — | No | Determines whether element's icon has animation |
padding
|
string
| — |
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_large
| No | Determines padding for items |
rounded
|
string
| — |
extra_smallsmallmediumlargeextra_largenone
| No | Determines the border radius |
border
|
string
|
extra_small
| — | No | Determines border style |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
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 |
item
| No | — |
Attributes of the item slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
title
|
string
| — | — | No | Specifies the title of the element |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
font_weight
|
string
| — | — | No | Determines custom class for the font weight |
link_title
|
string
| — | — | No | Determines link |
link
|
string
| — | — | No | Determines link path |
active
|
boolean
| — | — | No | Indicates whether the element is currently active and visible |
title_class
|
string
| — | — | No | Custom CSS class for additional styling to title |
wrapper_class
|
string
| — | — | No | Custom CSS class for additional styling to content wrapper |
link_class
|
string
| — | — | No | Custom CSS class for additional styling to link |
content_class
|
string
| — | — | No | Custom CSS class for additional styling to content |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
outlinedefaultborderedtransparentgradientbase
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--rounded
|
extra_smallsmallmediumlargeextra_largenone
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_large
|
--type
|
table_contentcontent_wrappercontent_item
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component table_content