Table of Content

New version v0.0.8 🚀

Phoenix LiveView table content component with links for smooth scrolling to specific items using anchor tags.

Installation:

mix mishka.ui.gen.component table_content

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

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.

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, base, gradient, outline, and bordered. It also offers a variety of colors such as natural, base, white, primary, secondary, primary, success, warning, danger, info, silver, 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="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.

<.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_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.

<.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>

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.

<.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

<.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>

Table Content Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
title	string	No	Specifies the title of the element. Default is nil.
variant	string	No	Determines the style of the table of content. Supported values: default, outline, transparent, shadow, bordered, gradient.
color	string	No	Determines the color theme of the table of content. Supported values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default is natural.The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
space	string	No	Space between items. Default is nil.
animated	boolean	No	This adds a class to the HTML body for smooth scrolling. Default is false.
padding	string	No	Determines padding for items. Default is nil.
item	Slot	No	The slot name is used to specify a named placeholder in the component. It allows the component to accept custom content for rendering. The available props for this slot are: class: Custom CSS class for additional styling, title: Specifies the title of the element, title_class: Custom CSS class for additional styling to title, wrapper_class: Custom CSS class for additional styling to content wrapper, content_class: Custom CSS class for additional styling to content, link_class: Custom CSS class for additional styling to link, icon: Icon displayed alongside the item, icon_class: Custom class for the icon, font_weight: Custom class for the font weight, link_title: Determines the title of the link, link: Determines the link URL, active: Indicates whether the element is currently active and visible.
rounded	string	No	Determines the border radius. Default is nil.
border	string	No	Determines border style. Default is extra_small.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is small.

Content Wrapper Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
title	string	No	Specifies the title of the element. Default is nil.
icon	string	No	Icon displayed alongside of an item. Default is nil.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
rest	global	No	Global attributes that define defaults merged with attributes provided by the caller.

Content item Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
title	string	No	Specifies the title of the element. Default is nil.
title_class	string	No	Custom CSS class for additional styling to title. Default is nil.
wrapper_content_class	string	No	Custom CSS class for additional styling content wrapper. Default is nil.
content_class	string	No	Custom CSS class for additional styling to content. Default is nil.
link_class	string	No	Custom CSS class for additional styling to link. Default is nil.
icon	string	No	Icon displayed alongside of an item. Default is nil.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
icon	string	No	Icon displayed alongside of an item
icon_class	string	No	Determines custom class for the icon
link	string	No	Determines path of link
link_title	string	No	Determines link name
active	boolean	No	Indicates whether the element is currently active and visible
rest	global	No	Global attributes that define defaults merged with attributes provided by the caller.

TableContent CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	outline - default - bordered - transparent - gradient - base	Yes
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--type`	string	table_content - content_wrapper - content_item	Yes
`--only`	string	table_content - content_wrapper - content_item	Yes
`--module`	string	Something	NO