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. It's perfect for documents, tutorials, or guides, allowing users to easily jump to different sections using anchor links.
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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Table contetn Variants and Colors
The table content component
supports multiple style variants, including
default
,
outline
, and
unbordered
.
It also offers a variety of colors such as
white
,
primary
,
secondary
,
success
,
warning
,
danger
,
info
,
light
,
dark
,
misc
,
dawn
,
and
silver
, providing extensive flexibility to match any design need.
<.table_content color="white" variant="default"></.table_content> <.table_content color="primary" variant="unbordered"></.table_content> <.table_content color="secondary" variant="outline"></.table_content> <.table_content color="dark" variant="default"></.table_content> <.table_content color="success" variant="unbordered"></.table_content> <.table_content color="warning" variant="outline"></.table_content> <.table_content color="danger" variant="default"></.table_content> <.table_content color="info" variant="unbordered"></.table_content> <.table_content color="light" variant="outline"></.table_content> <.table_content color="misc" variant="default"></.table_content> <.table_content color="dawn" variant="unbordered"></.table_content> <.table_content color="silver" variant="outline"></.table_content>
Rounded prop in Phoenix LiveView table content Component
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
.
<.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
.
<.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
.
<.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
.
<.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
.
<.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.
<.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.
Notice: If you've already added smooth scrolling via CSS files or directly to the HTML tag of your project, you don't need to use the
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
.
<.table_content > <.content_item> <.link patch="/path"></.link> </.content_item> <.content_item> <.link patch="/path"></.link> </.content_item> <.content_item> <.link navigate="/path"></.link> </.content_item> </.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.
<.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.
<.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
.
<.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.
<.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>
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>