Overview of the Phoenix and LiveView Accordion Component

The Mishka Chelekom Accordion module offers a wide variety of styles and colors , supporting both custom accordions and the native HTML details tag for Phoenix, this module allows you to add different variants and colors for a personalized appearance. With options to include icons and media, the accordion is ideal for managing and showcasing data efficiently. Its ability to divide content into collapsible sections provides a clean and functional way to present large volumes of information.

The Mishka Chelekom Accordion component also seamlessly integrates with Phoenix LiveView applications, offering enhanced interactivity. With this Phoenix LiveView component users can show or hide content effortlessly, while the module’s flexibility with colors and styles ensures that it fits within any design. Whether you’re adding icons, media, or simply dividing complex data into more manageable sections, the accordion component is a versatile solution for improving both functionality and user experience.

How to use Phoenix and LiveView accordion component

The Mishka Chelekom Accordion module includes a required :item slot, which defines each individual accordion entry. This slot gives you control over elements like the title, description, icons, and more, allowing for easy customization of your accordion items to suit your design and content needs. Each item has several attributes:

• title (Required): Specifies the title of the accordion item, which is displayed when the accordion is closed.
• description: A brief description that appears under the title, offering additional context.
• icon: Adds an icon next to the title, enhancing visual representation.
• image: Displays an image next to the accordion item for more interactive content.
• hover: Custom class applied when the item is hovered over, allowing dynamic styling.
• open: A boolean that controls whether the accordion item is open true or closed false by default.

RTL LTR

Why Mishka Chelekom?

Why Mishka Chelekom?

Mishka Chelekom is an open-source UI kit for Phoenix and Phoenix LiveView, built with Tailwind CSS. It offers essential components like drawers, popovers, and accordions to help developers create responsive, interactive user interfaces effortlessly. Start building faster with our easy-to-follow guide, and optimize your Phoenix and LiveView projects with flexible, customizable components.

Is it open-source?

Is it open-source?

Mishka Chelekom is a powerful, open-source component library crafted for Phoenix and Phoenix LiveView. Developed using Tailwind CSS, it provides a wide range of UI components, including drawers, popovers, and accordions, to help streamline the creation of responsive, dynamic web applications. Boost your development process with our comprehensive guide and start building modern, interactive user interfaces for your Phoenix and LiveView projects effortlessly.

Icon prop Item one

This accordion accepts icon in summary

Icon prop Item one

This accordion accepts icon in summary

Select any icon from the Hero Icons website and add its name to the icon prop. The size of the icon can be adjusted using the icon_class prop in each slot.

Icon prop Item two

This accordion accepts icon in summary

Icon prop Item two

This accordion accepts icon in summary

Select any icon from the Hero Icons website and add its name to the icon prop. The size of the icon can be adjusted using the icon_class prop in each slot.

<!-- a unique id is required for each .accordion -->
<.accordion id="example">
  <:item
    title="Custom Accordion Item one"
    description="Description of slot"
    image="/address/to/image"
    image_class="rounded-full"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Custome Accordion Item two"
    description="Description of slot"
    image="/address/to/image"
    image_class="rounded-full"
    open={true} <!--This item is open -->
  >
    <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-one">
  <:item
    title="Custom Accordion Item one"
    description="Description of slot"
    icon="hero-chat-bubble-left-right-solid"
    icon_class="size-5"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Custome Accordion Item two"
    description="Description of slot"
    icon="hero-chat-bubble-oval-left-ellipsis-solid"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Default Variant

The default variant includes basic styles with a background and borders, providing a clean and simple appearance. 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.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-two" color="secondary">
  <:item
    title="Default variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Default variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Contained Variant

The contained variant applies borders only with no background color, giving the component a clean and minimal look. You can customize the border colors with options like primary , secondary , dark , success , warning , danger , info , light , misc , and dawn .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-three" variant="contained">
  <:item
    title="Contained variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Contained variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Filled Variant

The filled variant 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 .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-four" variant="filled">
  <:item
    title="Filled variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Filled variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

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 .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-five" variant="separated">
  <:item
    title="Separated variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Separated variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Tinted Split Variant

The tinted_split variant includes both a background color and a border for each item, with space between them for a clean, structured layout. You can customize the background colors using options such as primary , secondary , dark , success , warning , danger , info , light , misc , and dawn .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-six" variant="tinted_split">
  <:item
    title="Tinted Split variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Tinted Split variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Transparent Variant

The transparent variant features transparent borders and background, with only the content's color changing. You can customize the content color using options such as primary , secondary , dark , success , warning , danger , info , light , misc , and dawn . Each item maintains a clean, minimal layout with space between items.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-seven" variant="transparent">
  <:item
    title="Transparent variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Transparent variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Menu Variant

The menu variant was specifically created for use inside the menu component . It applies a background color only to the summary section, leaving the rest of the content transparent. You can customize the summary background with color options like primary , secondary , dark , and others. This variant ensures a clean, organized layout with space between items, making it ideal for structuring menu sections.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-eight" variant="menu">
  <:item
    title="Menu variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Menu variant item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Menu variant item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Padding prop in Phoenix LiveView Accordion Component

The padding prop offers values such as extra_small , small , medium , large , and extra_large , allowing for flexible adjustment of the padding applied to the content and summary sections of the accordion. These padding options enable the creation of either compact or spacious layouts.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-nine" padding="medium">
  <:item
    title="Contained variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Contained variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Size prop in Phoenix LiveView Accordion Component

The size prop adjusts the text size of the accordion and uses Tailwind's text size classes to apply these changes. It offers values such as extra_small , small , medium , large , and extra_large .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-ten" size="large">
  <:item
    title="Size prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Size prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Size prop item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Space prop

The space prop is designed for the separated and tinted_split variants. It controls the space between each accordion item, helping to create a more organized and distinct layout, ensuring that items remain clearly separated. It offers values such as extra_small , small , medium , large , and extra_large .

<!-- a unique id is required for each .accordion -->

<.accordion id="example-11" space="large">
  <:item
    title="Space prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Space prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Space prop item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Rounded prop

The rounded prop offers values like extra_small , small , medium , large , and extra_large . These values control the border radius of the accordion items, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-12" rounded="small">
  <:item
    title="Rounded prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Rounded prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Rounded prop item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Media size prop

The media_size prop allows control over the width and height of media elements, such as images, in the summary section of the accordion. It accepts values like extra_small , small , medium , large , and extra_large . Passing the media_size prop to the .accordion will apply the specified size to all images in the item slots, ensuring consistent image dimensions across the accordion.

RTL LTR

Media size prop item one

Media size prop item one

Media size prop item one content

Media size prop item two

Media size prop item two

Media size prop item two content

<!-- a unique id is required for each .accordion -->

<.accordion id="example-13" media_size="extra_small">
  <:item
    title="Media size prop item one"
    image="/path/to/image"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Media size prop item two"
    image="/path/to/image"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Chevron props

The chevron_icon prop allows customization of the accordion's chevron icon using LiveView Hero Icons. Additionally, options like left_chevron , right_chevron , and hide_chevron enable control over the chevron’s position or visibility. By default, the chevron icon is positioned on the left.

<!-- a unique id is required for each .accordion -->

<.accordion id="example-14" chevron_icon="hero-cog-8-tooth">
  <:item
    title="Chevron prop item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-15" right_chevron>
  <:item
    title="Chevron prop item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-16" hide_chevron>
  <:item
    title="Chevron prop item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

HTML details tag as Accordion in Phoenix LiveView

The native accordion in Mishka Chelekom is built using the native HTML details and summary elements, offering a streamlined and accessible accordion component. All options available for the Mishka Chelekom Icon prop, such as rounded, padding, space, media_size, color variants, and chevron_icon , also apply to the native accordion. This ensures a consistent user experience while leveraging the simplicity and native functionality of the HTML elements.

Notice: If a string is passed to the name prop of the native accordion, it enables the native behavior where only one accordion item can remain open at a time. When a new item is opened, the previously open item will automatically close.

<.native_accordion>
  <:item
    title="Native Accordion prop item one"
  >
   <!--Content goes here-->
  </:item>
  <:item
    title="Native Accordion prop item two"
  >
   <!--Content goes here-->
  </:item>
  <:item
    title="Native Accordion prop item three"
  >
   <!--Content goes here-->
  </:item>
</.native_accordion>

<.native_accordion name="chelekom-native-accordion">
  <:item
    title="Native Accordion prop item one"
  >
   <!--Content goes here-->
  </:item>
  <:item
    title="Native Accordion prop item two"
  >
   <!--Content goes here-->
  </:item>
  <:item
    title="Native Accordion prop item three"
  >
   <!--Content goes here-->
  </:item>
</.native_accordion>