Pyro

Appearance

List ​

RC 1.8Kb multi
js
import 'pyro/list'
import 'pyro/list-item'
Preview Code Stackblitz
Header one two three

Usage ​

html
<pyro-list>
  <span slot="header">Header</span>
  <pyro-list-item>one</pyro-list-item>
  <pyro-list-item>two</pyro-list-item>
  <pyro-list-item>three</pyro-list-item>
</pyro-list>

Variations ​

Props ​

ts
interface ListProps {
  /** Header text */
  header?: string;
  onClick?: (e: CustomEvent) => void;
  children?: any;
}
interface ListItemProps {
  /** Label/text, overriden by default slot */
  label?: string;
  /** Selected */
  selected?: boolean;
  children?: any;
}

Slots ​

ts
/**
 * List
 * @slot - `pyro-list-item`s or elements containing `pyro-list-item`s
 * @slot header - Content above slot
 * 
 * List item
 * @slot prefix - Prefix, before label
 * @slot suffix - Suffix, after label
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * List
 * @prop {--pyro-list-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-list-spacing = --pyro-spacing-s} - `padding`
 * @prop {--pyro-list-border = --pyro-border} - `border-left`
 * @prop {--pyro-list-min-width = 130px} - `min-width`
 * 
 * List item
 * @prop {--pyro-list-item-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-list-item-spacing = --pyro-spacing} - `padding`
 */