mishka_chelekom

0.0.9-beta.2

0.0.10-alpha.5 0.0.10-alpha.4 0.0.10-alpha.3 0.0.10-alpha.2 0.0.10-alpha.1 0.0.9 0.0.9-rc.2 0.0.9-rc.1 0.0.9-beta.5 0.0.9-beta.4 0.0.9-beta.3 0.0.9-beta.2 0.0.9-beta.1 0.0.9-alpha.20 0.0.9-alpha.18 0.0.9-alpha.17 0.0.9-alpha.16 0.0.9-alpha.15 0.0.9-alpha.14 0.0.9-alpha.13 0.0.9-alpha.12 0.0.9-alpha.11 0.0.9-alpha.10 0.0.9-alpha.9 0.0.9-alpha.8 0.0.9-alpha.7 0.0.9-alpha.6 0.0.9-alpha.5 0.0.9-alpha.4 0.0.9-alpha.3 0.0.9-alpha.2 0.0.9-alpha.1 0.0.8 0.0.8-rc.2 0.0.8-rc.1 0.0.8-beta.5 0.0.8-beta.4 0.0.8-beta.3 0.0.8-beta.2 0.0.8-beta.1 0.0.8-alpha.4 0.0.8-alpha.3 0.0.8-alpha.2 0.0.8-alpha.1 0.0.7 0.0.6 0.0.6-alpha.2 0.0.6-alpha.1 0.0.5 0.0.5-beta.2 0.0.5-beta.1 0.0.5-alpha.12 0.0.5-alpha.11 0.0.5-alpha.10 0.0.5-alpha.9 0.0.5-alpha.8 0.0.5-alpha.7 0.0.5-alpha.6 0.0.5-alpha.5 0.0.5-alpha.4 0.0.5-alpha.3 0.0.5-alpha.2 0.0.5-alpha.1 0.0.4 0.0.4-beta.3 0.0.4-beta.2 0.0.4-beta.1 0.0.4-alpha.9 0.0.4-alpha.8 0.0.4-alpha.7 0.0.4-alpha.6 0.0.4-alpha.5 0.0.4-alpha.4 0.0.4-alpha.3 0.0.4-alpha.2 0.0.4-alpha.1 0.0.3 0.0.3-alpha.3 0.0.3-alpha.2 0.0.3-alpha.1 0.0.2 0.0.2-rc.2 0.0.2-rc.1 0.0.2-beta.4 0.0.2-beta.3 0.0.2-beta.2 0.0.2-beta.1 0.0.2-alpha.3 0.0.2-alpha.2 0.0.2-alpha.1 0.0.1

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

HexDocs

Current section

Files

Jump to

Readme 91 Versions 10 Dependencies Dependants Files Activity

mishka_chelekom usage-rules components list.md

Raw

usage-rules/components/list.md

# List Component

Versatile list components for ordered, unordered, and grouped lists with customizable styling.

**Documentation**: https://mishka.tools/chelekom/docs/list

> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.

## Generate

```bash
# Generate with all options
mix mishka.ui.gen.component list

# Generate with specific options
mix mishka.ui.gen.component list --variant default,bordered --color natural,primary

# Generate specific component types only
mix mishka.ui.gen.component list --type list,ul,ol,list_group

# Generate with custom module name
mix mishka.ui.gen.component list --module MyAppWeb.Components.CustomList
```

## Dependencies

| Type | Components |
|------|------------|
| **Necessary** | `icon` |
| **Optional** | None |
| **JavaScript** | None |

## Component Types

| Component | Description |
|-----------|-------------|
| `list/1` | Generic list container |
| `li/1` | List item |
| `ul/1` | Unordered list |
| `ol/1` | Ordered list |
| `list_group/1` | Grouped list container |

## Attributes

### `list/1` Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `:string` | `nil` | Unique identifier |
| `variant` | `:string` | `"base"` | Style variant |
| `color` | `:string` | `"base"` | Color theme |
| `size` | `:string` | `"medium"` | Text size |
| `space` | `:string` | `"small"` | Space between items |
| `padding` | `:string` | `"small"` | Item padding |
| `rounded` | `:string` | `"small"` | Border radius |
| `class` | `:any` | `nil` | Custom CSS class |

## Slots

### `item` Slot

| Attribute | Type | Description |
|-----------|------|-------------|
| `icon` | `:string` | Icon name |
| `icon_class` | `:string` | Icon styling |
| `padding` | `:string` | Item padding |
| `class` | `:any` | Item class |

### `inner_block` Slot

Content for list items.

## Available Options

### Variants
`base`, `default`, `bordered`, `outline`, `shadow`, `gradient`, `outline_separated`, `bordered_separated`, `transparent`, `base_separated`

### Colors
`base`, `natural`, `white`, `primary`, `secondary`, `dark`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dawn`

### Sizes
`extra_small`, `small`, `medium`, `large`, `extra_large`

### Space / Padding
`extra_small`, `small`, `medium`, `large`, `extra_large`, `none`

### Rounded
`extra_small`, `small`, `medium`, `large`, `extra_large`, `full`, `none`

## Usage Examples

### Basic List

```heex
<.list>
  <:item>First item</:item>
  <:item>Second item</:item>
  <:item>Third item</:item>
</.list>
```

### With Icons

```heex
<.list>
  <:item icon="hero-home">Home</:item>
  <:item icon="hero-user">Profile</:item>
  <:item icon="hero-cog-6-tooth">Settings</:item>
</.list>
```

### Different Variants

```heex
<.list variant="default">Default</.list>
<.list variant="bordered">Bordered</.list>
<.list variant="outline">Outline</.list>
<.list variant="shadow">Shadow</.list>
<.list variant="bordered_separated">Bordered Separated</.list>
```

### Different Colors

```heex
<.list color="primary">
  <:item>Primary colored</:item>
</.list>

<.list color="success">
  <:item>Success colored</:item>
</.list>
```

### Unordered List

```heex
<.ul>
  <.li>Item one</.li>
  <.li>Item two</.li>
  <.li>Item three</.li>
</.ul>
```

### Ordered List

```heex
<.ol>
  <.li>First step</.li>
  <.li>Second step</.li>
  <.li>Third step</.li>
</.ol>
```

### List Group

```heex
<.list_group>
  <.list variant="bordered">
    <:item icon="hero-envelope" padding="medium">Messages</:item>
    <:item icon="hero-bell" padding="medium">Notifications</:item>
    <:item icon="hero-cog-6-tooth" padding="medium">Settings</:item>
  </.list>
</.list_group>
```

### Navigation List

```heex
<.list variant="transparent" size="small">
  <:item icon="hero-home" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Dashboard
  </:item>
  <:item icon="hero-users" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Users
  </:item>
  <:item icon="hero-chart-bar" padding="small" class="hover:bg-gray-100 rounded cursor-pointer">
    Analytics
  </:item>
</.list>
```

## Common Patterns

### Feature List

```heex
<.list variant="transparent" space="medium">
  <:item icon="hero-check-circle" icon_class="text-green-500 size-6">
    <div>
      <p class="font-medium">Unlimited projects</p>
      <p class="text-sm text-gray-500">Create as many as you need</p>
    </div>
  </:item>
  <:item icon="hero-check-circle" icon_class="text-green-500 size-6">
    <div>
      <p class="font-medium">Priority support</p>
      <p class="text-sm text-gray-500">Get help when you need it</p>
    </div>
  </:item>
  <:item icon="hero-check-circle" icon_class="text-green-500 size-6">
    <div>
      <p class="font-medium">Advanced analytics</p>
      <p class="text-sm text-gray-500">Track everything</p>
    </div>
  </:item>
</.list>
```

### User List

```heex
<.list variant="bordered_separated" rounded="large">
  <:item :for={user <- @users} padding="medium">
    <div class="flex items-center gap-4">
      <.avatar src={user.avatar} size="small" rounded="full" />
      <div>
        <p class="font-medium">{user.name}</p>
        <p class="text-sm text-gray-500">{user.email}</p>
      </div>
    </div>
  </:item>
</.list>
```

### Activity Feed

```heex
<.list variant="transparent" space="small">
  <:item :for={activity <- @activities} padding="small">
    <div class="flex items-start gap-3">
      <.icon name={activity.icon} class="size-5 text-gray-400 mt-0.5" />
      <div>
        <p><span class="font-medium">{activity.user}</span> {activity.action}</p>
        <p class="text-sm text-gray-500">{activity.time}</p>
      </div>
    </div>
  </:item>
</.list>
```

### Dropdown Menu Items

```heex
<.list variant="transparent" size="small" padding="none">
  <:item icon="hero-pencil" padding="extra_small" class="hover:bg-gray-100 cursor-pointer">
    Edit
  </:item>
  <:item icon="hero-document-duplicate" padding="extra_small" class="hover:bg-gray-100 cursor-pointer">
    Duplicate
  </:item>
  <:item icon="hero-trash" padding="extra_small" class="hover:bg-gray-100 cursor-pointer text-red-500">
    Delete
  </:item>
</.list>
```

### Settings List

```heex
<.list variant="bordered_separated" rounded="large">
  <:item padding="medium">
    <div class="flex items-center justify-between w-full">
      <div>
        <p class="font-medium">Email notifications</p>
        <p class="text-sm text-gray-500">Receive email updates</p>
      </div>
      <.toggle_field name="email_notifications" checked={@settings.email_notifications} />
    </div>
  </:item>
  <:item padding="medium">
    <div class="flex items-center justify-between w-full">
      <div>
        <p class="font-medium">Push notifications</p>
        <p class="text-sm text-gray-500">Get push alerts</p>
      </div>
      <.toggle_field name="push_notifications" checked={@settings.push_notifications} />
    </div>
  </:item>
</.list>
```

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT