Duskmoon UI · Storybook

Collapse dm_collapse / dm_collapse_group

## Overview Collapse component using `@duskmoon-dev/core` CSS classes. A single collapsible panel with trigger and content areas. Unlike `dm_accordion` (which manages multiple panels via custom element), `dm_collapse` is a standalone CSS-only toggle. ## Usage ```elixir <.dm_collapse> <:trigger>Click to expand</:trigger> <:content>Hidden content revealed on click.</:content> </.dm_collapse> <.dm_collapse variant="card" color="primary" open> <:trigger>Details</:trigger> <:content>Expanded by default.</:content> </.dm_collapse> ```

Basic Collapse

A comprehensive UI component library for Phoenix LiveView applications, built on @duskmoon-dev/core CSS design system and custom elements.

Initially Open

This content is visible when the page loads.

Style Variants

Card style with border and shadow.

Simple bordered style.

Transparent background.

Divider line under trigger.

Color Variants

Primary colored trigger.

Secondary colored trigger.

Tertiary colored trigger.

Size Variants

Small collapse.

Default size.

Large collapse.

Animation Variants

Content fades in and out.

Content slides in and out.

Faster transition speed.

Slower transition speed.

Disabled

This should not be visible.

Collapse Group

Phoenix LiveView with Elixir.

Add phoenix_duskmoon to your mix.exs dependencies.

Yes, MIT licensed.