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.

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.

Filled Variant

The filled variant for the list component includes a background color and supports various customizable color options. You can customize the background colors with options like primary , secondary , dark , success , warning , danger , info , light , misc , and dawn . If you don't specify a variant, this filled variant is the default option.

<.list color="white"></.list>

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

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

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

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

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

<.list color="danger"></.list>

<.list color="info"></.list>

<.ol color="light"></.ol>

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

<.list 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 white , primary , secondary , dark , success , warning , danger , info , light , 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.

<.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="light"></.ul>

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

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

Separated Variant

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

<.list variant="separated" color="white"></.list>

<.list variant="separated" color="primary"></.list>

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

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

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

<.list variant="separated" color="warning"></.list>

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

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

<.list variant="separated" color="light"></.list>

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

<.ul variant="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 primary , secondary , dark , success , warning , danger , info , light , misc , and dawn .

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

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

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

<.list_group variant="outline" color="dark"></.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="light"></.list_group>

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

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

Tinted Split Variant

The tinted split 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 , dark , success , warning , danger , info , light , 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.

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

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

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

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

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

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

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

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

<.list_group variant="tinted_split" color="light"></.list_group>

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

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

Transparent Variant

The transparent variant features transparent borders and background.

<.list variant="transparent"></.list>

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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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