List

New version v0.0.8 🚀

Customizable list and list group components in Phoenix LiveView, styled lists with various options like colors, sizes, variants, and spacing to enhance content organization.

Installation:

mix mishka.ui.gen.component list

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Overview of the Phoenix LiveView List Component

The Mishka Chelekom List component is a highly customizable and versatile Phoenix LiveView component designed for creating structured lists, whether for navigation menus, data displays, or item groupings. It supports both ordered and unordered lists and can be styled to match a variety of use cases, making it an ideal solution for organizing content within your web application.

Step 1: Sign Up
Step 2: Verify Your Email
Step 3: Complete Your Profile
Step 4: Explore Features

Clone Project
Install dependencies
Start development server
Loading... Run tests

Tickets

20
Notifications
Active Users

300
Pending Tasks

8

Plan: Define goals and create a roadmap.
Assign Roles: Delegate tasks effectively.
Develop:
- Sketch wireframes.
- Build the front-end.
- Set up the back-end.
- Integrate APIs.

The Phoenix LiveView List component provides developers with complete control over the appearance of list elements by offering customizable props such as colors, sizes, padding, and variants.

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.

Base color & Variant

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list unordered variant="base" color="base"></.list>

<.ul variant="base" color="base"></.ul>

<.list_group variant="base" color="base"></.list_group>

<.ol variant="base" color="base"></.ol>

<.list variant="base_separated" space="small" color="base">
  <:item>Home</:item>
  <:item>Services</:item>
  <:item>About Us</:item>
  <:item>Contact</:item>
</.list>

bordered Variant

The bordered variant for the list component includes a background color and border color and supports various customizable color options. You can customize the colors with options like natural, white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn.

Home
Services
About Us
Contact

Step 1: Sign Up
Step 2: Verify Your Email
Step 3: Complete Your Profile
Step 4: Explore Features

<.list unordered variant="bordered" color="natiral"></.list>

<.list unordered variant="bordered" color="white"></.list>

<.ul variant="bordered" color="primary"></.ul>

<.ul variant="bordered" color="secondary"></.ul>

<.list_group variant="bordered" color="dark"></.list_group>

<.list_group variant="bordered" color="success"></.list_group>

<.list_group variant="bordered" color="warning"></.list_group>

<.list unordered variant="bordered" color="danger"></.list>

<.list unordered variant="bordered" color="info"></.list>

<.ol variant="bordered" color="silver"></.ol>

<.ol variant="bordered" color="misc"></.ol>

<.list unordered variant="bordered" color="dawn"></.list>

Default Variant

The default variant includes basic styles with a background and borders. You can customize it with different color options, including natural, white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn to match your design needs. Additionally, all list components in the Mishka Chelekom List module support this variant and color options. Whether you're using ordered or unordered list component, or the list group component, you can apply these styles consistently across your project.

Home
Services
About Us
Contact

Step 1: Sign Up
Step 2: Verify Your Email
Step 3: Complete Your Profile
Step 4: Explore Features

<.list_group variant="default" color="natural"></.list_group>

<.list_group variant="default" color="white"></.list_group>

<.list_group variant="default" color="primary"></.list_group>

<.list_group variant="default" color="secondary"></.list_group>

<.list_group variant="default" color="dark"></.list_group>

<.ol variant="default" color="success"></.ol>

<.ol variant="default" color="warning"></.ol>

<.ol variant="default" color="danger"></.ol>

<.ul variant="default" color="info"></.ul>

<.ul variant="default" color="silver"></.ul>

<.list variant="default" color="misc"></.list>

<.list unordered variant="default" color="dawn"></.list>

Outline Separated Variant

The Outline Separated variant has a customizable border colors. Each item is item by space, with the default border color set to various options. You can customize the background colors with options like primary, secondary, success, warning, danger, info, silver, misc, and dawn.

Home
Services
About Us
Contact

Step 1: Sign Up
Step 2: Verify Your Email
Step 3: Complete Your Profile
Step 4: Explore Features

<.list unordered variant="outline_separated" color="natural"></.list>

<.list unordered variant="outline_separated" color="primary"></.list>

<.list_group variant="outline_separated" color="secondary"></.list_group>

<.list_group variant="outline_separated" color="success"></.list_group>

<.list unordered variant="outline_separated" color="warning"></.list>

<.ol variant="outline_separated" color="danger"></.ol>

<.ol variant="outline_separated" color="info"></.ol>

<.list unordered variant="outline_separated" color="silver"></.list>

<.ul variant="outline_separated" color="misc"></.ul>

<.ul variant="outline_separated" color="dawn"></.ul>

Outline Variant

The Outline variant offers a transparent background with customizable border colors. You can customize the border colors using options such as natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list_group variant="outline" color="natural"></.list_group>

<.list_group variant="outline" color="primary"></.list_group>

<.list_group variant="outline" color="secondary"></.list_group>

<.list_group variant="outline" color="success"></.list_group>

<.list_group variant="outline" color="warning"></.list_group>

<.list_group variant="outline" color="danger"></.list_group>

<.list_group variant="outline" color="info"></.list_group>

<.list_group variant="outline" color="silver"></.list_group>

<.list_group variant="outline" color="misc"></.list_group>

<.list_group variant="outline" color="dawn"></.list_group>

Bordered separated Variant

The Bordered separated variant includes both a background color and a border for each item, with space between them. You can customize the background colors using options such as primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn. This variant is best suited for the list_group component because it automatically applies space between each element. However, if you prefer to use it with the list component, make sure to apply the space prop to maintain proper spacing between list items.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list_group variant="bordered_separated" color="natural"></.list_group>

<.list_group variant="bordered_separated" color="primary"></.list_group>

<.list_group variant="bordered_separated" color="secondary"></.list_group>

<.list_group variant="bordered_separated" color="success"></.list_group>

<.list_group variant="bordered_separated" color="warning"></.list_group>

<.list_group variant="bordered_separated" color="danger"></.list_group>

<.list_group variant="bordered_separated" color="info"></.list_group>

<.list_group variant="bordered_separated" color="silver"></.list_group>

<.list_group variant="bordered_separated" color="misc"></.list_group>

<.list_group variant="bordered_separated" color="dawn"></.list_group>

Transparent Variant

The transparent variant features transparent borders and background.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list_group variant="transparent" color="natural"></.list_group>

<.list_group variant="transparent" color="primary"></.list_group>

<.list_group variant="transparent" color="secondary"></.list_group>

<.list_group variant="transparent" color="success"></.list_group>

<.list_group variant="transparent" color="warning"></.list_group>

<.list_group variant="transparent" color="danger"></.list_group>

<.list_group variant="transparent" color="info"></.list_group>

<.list_group variant="transparent" color="silver"></.list_group>

<.list_group variant="transparent" color="misc"></.list_group>

<.list_group variant="transparent" color="dawn"></.list_group>

Shadow Variant

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list_group variant="shadow" color="natural"></.list_group>

<.list_group variant="shadow" color="primary"></.list_group>

<.list_group variant="shadow" color="secondary"></.list_group>

<.list_group variant="shadow" color="success"></.list_group>

<.list_group variant="shadow" color="warning"></.list_group>

<.list_group variant="shadow" color="danger"></.list_group>

<.list_group variant="shadow" color="info"></.list_group>

<.list_group variant="shadow" color="silver"></.list_group>

<.list_group variant="shadow" color="misc"></.list_group>

<.list_group variant="shadow" color="dawn"></.list_group>

Gradient Variant

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list_group variant="gradient" color="natural"></.list_group>

<.list_group variant="gradient" color="primary"></.list_group>

<.list_group variant="gradient" color="secondary"></.list_group>

<.list_group variant="gradient" color="success"></.list_group>

<.list_group variant="gradient" color="warning"></.list_group>

<.list_group variant="gradient" color="danger"></.list_group>

<.list_group variant="gradient" color="info"></.list_group>

<.list_group variant="gradient" color="silver"></.list_group>

<.list_group variant="gradient" color="misc"></.list_group>

<.list_group variant="gradient" color="dawn"></.list_group>

Size prop

The size prop in the list component controls the overall size of the list items, including the text and icons. It offers several predefined size options: extra_small, small, medium, large, and extra_large.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list unordered size="extra_small"></.list>

<.list unordered size="small"></.list>

<.list unordered size="medium"></.list>

<.list unordered size="large"></.list>

<.list unordered size="extra_large"></.list>

Space prop

The space prop in the list and list group component allows you to control the vertical spacing between list items. With options such as extra_small, small, medium, large, and extra_large, you can easily customize the spacing to suit your design requirements, ensuring the list layout is aligned with the overall structure of your application.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list unordered space="extra_small"></.list>

<.list unordered space="small"></.list>

<.list unordered space="medium"></.list>

<.list unordered space="large"></.list>

<.list unordered space="extra_large"></.list>

Font weight prop

The font_weight prop allows you to customize the text weight of your list items by adding Tailwind CSS font-weight classes. This prop gives you control over how bold or light the text appears within the list component. You can use values like font-thin, font-normal, font-medium, font-bold, and font-extrabold. This flexibility helps maintain a consistent look across your application while enhancing readability and styling precision.

Home
Services
About Us
Contact

Home
Services
About Us
Contact

<.list unordered font_weight="font-thin"></.list>

<.ol font_weight="font-normal"></.ol>

<.list_group font_weight="font-medium"></.list_group>

<.ul font_weight="font-bold"></.ul>

<.list unordered font_weight="font-extrabold"></.list>

List style prop

The style attribute in the list component allows you to apply Tailwind CSS list styles to control how list items are displayed. By default, it uses list-none, which removes any default list markers or bullets. However, you can customize the list style by applying other Tailwind list utility classes like list-disc for bullet points or list-decimal for numbered lists.

Home
Services
About Us
Contact

<.list unordered variant="transparent" style="list-disc">
  <:item>Home</:item>
  <:item>Services</:item>
  <:item>About Us</:item>
  <:item>Contact</:item>
</.list>

List width prop

The width prop allows you to control the width of the ul, ol and list_group components. It supports predefined values such as extra_small, small, medium, large, extra_large, and full. By default, if no width is specified, the list will take up the full width (w-full).

Bookmark
Tickets
Favorits

Bookmark
Tickets
Favorits

<.ol width="extra_small"></.ol>

<.ol width="small"></.ol>

<.ul width="medium"></.ul>

<.ul width="large"></.ul>

<.list_group width="extra_large"></.list_group>

List ordered and unordered prop

The ordered prop in the list component allows you to define whether the list should be rendered as an ordered list or an unordered list. By default, the list is rendered as an unordered list (ul), but when the ordered prop is set to true, the component renders the list as an ordered list (ol). This provides flexibility in displaying a numbered or bulleted list depending on your design needs.

Bookmark
Tickets
Favorits

Bookmark
Tickets
Favorits

Bookmark
Tickets
Favorits

<.list ordered>
  <.li></.li>
  <.li></.li>
</.list>

<.list ordered>
  <:item></:item>
  <:item></:item>
  <:item></:item>
</.list>

<.list unordered>
  <:item></:item>
  <:item></:item>
  <:item></:item>
</.list>

<.list unordered style="list-disc">
  <li></li>
  <li></li>
  <li></li>
</.list>

List item slot

The item slot in the list component allows you to define the content of each individual list item. You also can use li component inside list instead of item slot.

Home
Services
About Us
Contact

<.list unordered>
  <:item>Home</:item>
  <:item>Services</:item>
  <:item>About Us</:item>
  <:item>Contact</:item>
</.list>

Li component

The li component renders an individual list item with customizable attributes. It supports optional features like padding, icons, item count, and flexible content positioning.

Home
Services
About Us
Contact

<.list unordered>
  <.li>Home</.li>
  <.li>Services</.li>
  <.li>About Us</.li>
  <.li>Contact</.li>
</.list>

<.list_group>
  <.li>Home</.li>
  <.li>Services</.li>
  <.li>About Us</.li>
  <.li>Contact</.li>
</.list_group>

Li component count prop

The count attribute allows you to add a numeric value before the content of each list item, providing a convenient way to display an item counter. When an integer is provided for the count attribute, it is displayed before the list item content. This feature is useful for lists where you want to emphasize the order or ranking of the items without switching to an ordered list.

1.
Home
2.
Services
3.
About Us
4.
Contact

<.list unordered>
  <.li count={1}>Home</.li>
  <.li count={2}>Services</.li>
  <.li count={3}>About Us</.li>
  <.li count={4}>Contact</.li>
</.list>

<.list_group>
  <.li count={1}>Home</.li>
  <.li count={2}>Services</.li>
  <.li count={3}>About Us</.li>
  <.li count={4}>Contact</.li>
</.list_group>

Li component count seperator prop

The count_separator attribute allows you to define a custom separator between the count number and the content of each list item. By default, the separator is set to a period followed by a space, but you can modify it to suit your design needs, such as using a dash, colon, or any other character to create a distinct visual presentation.

1_
Home
2_
Services
3_
About Us
4_
Contact

<.list unordered>
  <.li count_separator="_" count={1}>Home</.li>
  <.li count_separator="_" count={2}>Services</.li>
  <.li count_separator="_" count={3}>About Us</.li>
  <.li count_separator="_" count={4}>Contact</.li>
</.list>

<.list_group>
  <.li count_separator="_" count={1}>Home</.li>
  <.li count_separator="_" count={2}>Services</.li>
  <.li count_separator="_" count={3}>About Us</.li>
  <.li count_separator="_" count={4}>Contact</.li>
</.list_group>

Li component icon prop

The icon attribute lets you use Heroicons to add any icon you want alongside your list item content.

Bookmark
Tickets
Favorits

Bookmark
Tickets
Favorits

<.list unordered>
  <.li icon="hero-bookmark">Bookmark</.li>
  <.li icon="hero-ticket">Tickets</.li>
  <.li icon="hero-star">Favorits</.li>
</.list>

Li component icon class prop

The icon_class attribute allows you to apply custom CSS classes to the icon, giving you full control over its styling. Whether you want to adjust the size, color of the icon, this attribute provides the flexibility to ensure that the icon matches the design and layout of your list items perfectly.

Bookmark
Tickets
Favorits

<.list unordered>
  <.li icon_class="size-8 me-3.5 text-red-900" icon="hero-bookmark">Bookmark</.li>
  <.li icon_class="size-8 me-3.5 text-red-900" icon="hero-ticket">Tickets</.li>
  <.li icon_class="size-8 me-3.5 text-red-900" icon="hero-star">Favorits</.li>
</.list>

Li component padding prop

The padding attribute in the li component controls the amount of space around the content of each list item. By default, it is set to none, meaning no padding is applied. You can customize the padding using predefined values such as extra_small, small, medium, large, and extra_large, depending on how much spacing you want around the list content. This allows for greater control over the layout and appearance of list items.

Bookmark
Tickets
Favorits

Bookmark
Tickets
Favorits

<.list unordered>
  <.li padding="extra_small"></.li>

  <.li padding="small"></.li>

  <.li padding="medium"></.li>

  <.li padding="large"></.li>

  <.li padding="extra_large"></.li>
</.list>

ul component

The ul component is the HTML ul tag and supports various customization options. You can use props, previously mentioned on this page, like color, variant, size, style, space, and font_weight to control the appearance and layout of the list. You can use the HTML li tag or the li component inside this component.

Bookmark
Tickets
Favorits

<.ul>
  <.li></.li>

  <.li></.li>

  <.li></.li>

  <.li></.li>

  <.li></.li>
</.ul>

ol component

The ol component is the HTML ol tag and supports various customization options. You can use props, previously mentioned on this page, like color, variant, size, style, space, and font_weight to control the appearance and layout of the list. You can use the HTML li tag or the li component inside this component.

Bookmark
Tickets
Favorits

<.ol>
  <.li></.li>

  <.li></.li>

  <.li></.li>
</.ol>

List group component

The list_group simplifies organizing and styling list items. Each item is rendered using the content provided in either the standard HTML li tag or Mishka Chelekom's li component, ensuring flexibility in how you structure your lists. The previously mentioned props, such as variant, color, size, width, space, and font_weight.

Home
Payments
Settings

<.list_group>
  <.li>Home</.li>
  <.li>Payments</.li>
  <.li>Settings</.li>
</.list_group>

List group rounded prop

The rounded prop in the list_group component allows you to control the border radius of the list items. It supports multiple values, including extra_small, small, medium, large, extra_large, as well as full for fully rounded corners and none for no rounding. The default value is set to small.

Home
Payments
Settings

Home
Payments
Settings

<.list_group rounded="extra_small"></.list_group>

<.list_group rounded="small"></.list_group>

<.list_group rounded="medium"></.list_group>

<.list_group rounded="large"></.list_group>

<.list_group rounded="extra_large"></.list_group>

<.list_group rounded="full"></.list_group>

<.list_group rounded="none"></.list_group>

List hoverable prop

The hoverable prop adds a hover effect to list items when users interact with them. When enabled, this prop applies a subtle background color change as users mouse over each item, providing visual feedback for better interactivity.

Home
Payments
Settings

Home
Payments
Settings

<.list_group variant="default" hoverable></.list_group>

<.list_group variant="gradient" hoverable></.list_group>

<.list_group variant="bordered" hoverable></.list_group>

List group padding prop

The padding prop in the list_group component allows you to set the spacing inside each list item. You can choose from various padding sizes, including extra_small, small, medium, large, and extra_large. If no padding is desired, you can set it to none. The default value is none, meaning no padding is applied unless specified.

Home
Payments
Settings

Home
Payments
Settings

<.list_group padding="extra_small"></.list_group>

<.list_group padding="small"></.list_group>

<.list_group padding="medium"></.list_group>

<.list_group padding="large"></.list_group>

<.list_group padding="extra_large"></.list_group>

<.list_group padding="full"></.list_group>

<.list_group padding="none"></.list_group>

Nested lists

reating nested lists in Phoenix LiveView is simple and highly customizable, offering the flexibility to structure your content in multiple layers. Using the ul or ol or list components, you can define the first level of list items, and by nesting another list component inside, you can create second and third levels with ease.

First level list item
First level list item
First level list item

Second level list item
Second level list item

Third level list item
Third level list item
Third level list item

<.ul style="list-disc">
  <li>First level list item</li>
  <li>First level list item</li>
  <li>First level list item</li>
  <.list space="small" ordered>
    <:item>Second level list item</:item>
    <:item>Second level list item</:item>
    <.list space="large" unordered style="list-disc">
      <:item>Third level list item</:item>
      <:item>Third level list item</:item>
      <:item>Third level list item</:item>
    </.list>
  </.list>
</.ul>

List component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
hoverable	boolean	No	add a background when hover on each item
class	string	No	Custom CSS class for additional styling.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Default is large.
space	string	No	Space between items. Values: extra_small, small, medium, large, extra_large.
color	string	No	Determines color theme. Values: natural, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn. 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.
variant	string	No	Determines the style of the list. Values: default, bordered, outline, outline_separated, bordered_separated, transparent, shadow, gradient.
style	string	No	Specifies the list style. Default is list-none.

li Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
class	list	No	Custom CSS class for additional styling.
count	integer	No	Li counter for numbered list items.
count_separator	string	No	Specifies the separator between the list item number and its content. Default is . (single dot).
icon	string	No	Icon displayed alongside the list item.
icon_class	string	No	Custom CSS class for styling the icon. Default is list-item-icon.
content_class	string	No	Custom CSS class for styling the content of the list item.
padding	string	No	Determines the padding for the list item. Default is none.
position	string	No	Determines the alignment of the list item. Values: start, end, center. Default is start.

ul Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
color	string	No	Determines the color theme of the list. Values: white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn.
variant	string	No	Determines the style of the list. Values: bordered, outline, transparent, etc.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is medium.
width	string	No	Determines the element width. Default is full.
style	string	No	Specifies the list style, such as list-none, list-disc, etc. Default is list-none.
space	string	No	Space between list items. Accepts predefined sizes like small, medium, etc.
class	string	No	Custom CSS class for additional styling.
font_weight	string	No	Determines the font weight. Default is font-normal.

ol Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
color	string	No	Determines the color theme of the list. Values: white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn.
variant	string	No	Determines the style of the list. Values: bordered, outline, transparent, etc.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is medium.
width	string	No	Determines the element width. Default is full.
class	string	No	Custom CSS class for additional styling.
space	string	No	Space between list items. Accepts predefined sizes like small, medium, etc.
font_weight	string	No	Determines the font weight. Default is font-normal.

List Group Component Props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
hoverable	boolean	No	add a background when hover on each item
variant	string	No	Determines the style of the list group. Values: default, outline_separated, etc.
color	string	No	Determines the color theme of the list group. Values: white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is medium.
width	string	No	Determines the element width. Default is full.
space	string	No	Space between list items. Accepts predefined sizes like small, medium, etc.
rounded	string	No	Determines the border radius. Default is small.
border	string	No	Determines border style. Default is extra_small.
font_weight	string	No	Determines the font weight. Default is font-normal.
padding	string	No	Determines the padding for items. Default is none.
class	string	No	Custom CSS class for additional styling.

List CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - bordered - outline - shadow - gradient - outline_separated - bordered_separated - transparent - base - base_separated	Yes
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--type`	string	list - li - ul - ol - list_group	Yes
`--only`	string	list - li - ul - ol - list_group	Yes
`--module`	string	Something	NO