List
v0.0.10
mix mishka.ui.gen.component list
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.
Overview of the Phoenix LiveView List Component
-
Plan: Define goals and create a roadmap.
-
Assign Roles: Delegate tasks effectively.
-
Develop:
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.
Base color & Variant
Base color & Variant
<.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.
bordered Variant
<.list unordered variant="bordered" color="natural"></.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.
Default Variant
<.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.
Outline Separated Variant
<.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.
Outline Variant
<.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.
Bordered separated Variant
<.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.
Transparent Variant
<.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
Shadow Variant
<.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
Gradient Variant
<.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.
Size prop
<.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.
Space prop
<.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.
Font weight prop
<.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 chooses the marker drawn beside each item. It takes one of three values: list-none for no marker, list-disc for a bullet and list-decimal for a number. list, ul and ol all take it. list and ul default to list-none, which removes the marker, and ol defaults to list-decimal.
List style prop
<.list unordered variant="transparent" style="list-disc">
<:item>Home</:item>
<:item>Services</:item>
<:item>About Us</:item>
<:item>Contact</:item>
</.list>
<.ul variant="transparent" style="list-decimal">
<.li>Bookmark</.li>
<.li>Tickets</.li>
<.li>Favorits</.li>
</.ul>
<.ol variant="transparent" style="list-disc">
<.li>Bookmark</.li>
<.li>Tickets</.li>
<.li>Favorits</.li>
</.ol>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).
List width prop
<.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. An ordered list hands its own style to the ol, and that defaults to list-none, so write style="list-decimal" to number its items. The ol component on its own numbers by default.
List ordered and unordered prop
<.list ordered style="list-decimal">
<.li></.li>
<.li></.li>
</.list>
<.list ordered style="list-decimal">
<: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 slot
<.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.
Li component
<.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.
Li component count prop
<.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 separator 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.
Li component count separator prop
<.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.
Li component icon prop
<.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.
Li component icon class prop
<.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.
Li component padding prop
<.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. Its style is list-none by default, so items carry no marker until you write list-disc or list-decimal. You can use the HTML li tag or the li component inside this component.
ul 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. Its style is list-decimal by default, so the items are numbered; write list-disc for bullets or list-none for no marker. You can use the HTML li tag or the li component inside this component.
ol component
<.ol>
<.li>Bookmark</.li>
<.li>Tickets</.li>
<.li>Favorits</.li>
</.ol>
<.ol style="list-disc">
<.li>Bookmark</.li>
<.li>Tickets</.li>
<.li>Favorits</.li>
</.ol>
<.ol style="list-none">
<.li>Bookmark</.li>
<.li>Tickets</.li>
<.li>Favorits</.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 component
<.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 prop
<.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.
List hoverable prop
<.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.
List group padding prop
<.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="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.
Nested lists
<.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 style="list-decimal">
<: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>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 |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
size
|
string
|
large
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
space
|
string
| — |
extra_smallsmallmediumlargeextra_large
| No | Space between items |
border
|
string
|
extra_small
| — | No | Border size |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
variant
|
string
|
transparent
|
defaultborderedoutlineshadowgradientoutline_separatedbordered_separatedtransparentbasebase_separated
| No | Determines the style |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
hoverable
|
boolean
|
false
| — | No | active hover style |
style
|
string
|
list-none
|
list-nonelist-disclist-decimal
| No | The marker beside each item: none, a bullet, or a number |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
item
| No | — |
inner_block
| No | Inner block that renders HEEx content |
Attributes of the item slot
| 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 |
count
|
integer
| — | — | No | Li counter |
count_separator
|
string
| — | — | No | Li counter separator |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
content_class
|
string
| — | — | No | Determines custom class for the content |
padding
|
string
| — | — | No | Determines padding for items |
position
|
string
| — | — | No | Determines the element position |
title
|
string
| — | — | No | — |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultborderedoutlineshadowgradientoutline_separatedbordered_separatedtransparentbasebase_separated
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--type
|
listliulollist_group
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component list