Item

A composable row for action lists, settings and rich menu rows.

import { … } from '@inlaylab/ivorie/item'

Profile

Manage your account details.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';

@Component({
  selector: 'demo-item',
  imports: [IV_ITEM_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-item-group class="w-full max-w-sm">
      <iv-item variant="outline">
        <iv-item-content>
          <iv-item-title>Profile</iv-item-title>
          <p ivItemDescription>Manage your account details.</p>
        </iv-item-content>
      </iv-item>
    </iv-item-group>
  `,
})
export default class ItemDemo {}

Installation

CLI

npm

npx ivorie add item

import { … } from '@inlaylab/ivorie/item'

Usage

import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';

<iv-item-group>
  <iv-item variant="outline">
    <iv-item-content>
      <iv-item-title>Profile</iv-item-title>
      <p ivItemDescription>Manage your account details.</p>
    </iv-item-content>
  </iv-item>
</iv-item-group>

Examples

Media and actions

Profile

Manage your account details.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';
import { IvButton } from '@inlaylab/ivorie/button';
import { LucideUser } from '@lucide/angular';
import { LucideChevronRight } from '@lucide/angular';

@Component({
  selector: 'demo-item-media-actions',
  imports: [IV_ITEM_IMPORTS, IvButton, LucideUser, LucideChevronRight],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-item-group class="w-full max-w-sm">
      <iv-item variant="outline">
        <iv-item-media variant="icon">
          <svg lucideUser></svg>
        </iv-item-media>
        <iv-item-content>
          <iv-item-title>Profile</iv-item-title>
          <p ivItemDescription>Manage your account details.</p>
        </iv-item-content>
        <iv-item-actions>
          <button ivButton variant="ghost" size="icon-sm" aria-label="Open profile">
            <svg lucideChevronRight></svg>
          </button>
        </iv-item-actions>
      </iv-item>
    </iv-item-group>
  `,
})
export default class ItemMediaActionsDemo {}

Sizes

Default

Small

Extra small

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';

@Component({
  selector: 'demo-item-sizes',
  imports: [IV_ITEM_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-item-group class="w-full max-w-sm gap-2">
      <iv-item variant="outline">
        <iv-item-content><iv-item-title>Default</iv-item-title></iv-item-content>
      </iv-item>
      <iv-item variant="muted" size="sm">
        <iv-item-content><iv-item-title>Small</iv-item-title></iv-item-content>
      </iv-item>
      <iv-item variant="outline" size="xs">
        <iv-item-content><iv-item-title>Extra small</iv-item-title></iv-item-content>
      </iv-item>
    </iv-item-group>
  `,
})
export default class ItemSizesDemo {}

Header and footer

Invoice 1042

Paid

Monthly plan, billed on the 15th.

Jan 15$24.00

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';

@Component({
  selector: 'demo-item-header-footer',
  imports: [IV_ITEM_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-item variant="outline" class="w-full max-w-sm">
      <iv-item-header>
        <iv-item-title>Invoice 1042</iv-item-title>
        <span class="text-sm text-muted-foreground">Paid</span>
      </iv-item-header>
      <iv-item-content>
        <p ivItemDescription>Monthly plan, billed on the 15th.</p>
      </iv-item-content>
      <iv-item-footer>
        <span class="text-sm text-muted-foreground">Jan 15</span>
        <span class="text-sm font-medium">$24.00</span>
      </iv-item-footer>
    </iv-item>
  `,
})
export default class ItemHeaderFooterDemo {}

Separator

Account

Billing

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_ITEM_IMPORTS } from '@inlaylab/ivorie/item';

@Component({
  selector: 'demo-item-separator',
  imports: [IV_ITEM_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-item-group class="w-full max-w-sm">
      <iv-item>
        <iv-item-content><iv-item-title>Account</iv-item-title></iv-item-content>
      </iv-item>
      <iv-item-separator />
      <iv-item>
        <iv-item-content><iv-item-title>Billing</iv-item-title></iv-item-content>
      </iv-item>
    </iv-item-group>
  `,
})
export default class ItemSeparatorDemo {}

API

Every part also accepts class.

iv-item

Name	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'muted'`	`'default'`	Visual style.
`size`	`'default' \| 'sm' \| 'xs'`	`'default'`	Padding and gap.

iv-item-media

Name	Type	Default	Description
`variant`	`'default' \| 'icon' \| 'image'`	`'default'`	`icon` frames an icon. `image` frames a picture.

Other parts

No inputs besides class: iv-item-group, iv-item-content, iv-item-title, iv-item-description (or p[ivItemDescription]), iv-item-actions, iv-item-header, iv-item-footer, iv-item-separator.

Accessibility

iv-item-group has role="list". An iv-item that is a direct child of the group gets role="listitem". Nested items get no role. iv-item-separator has role="none". Items show a focus ring when focused.