List

Sizes

<script lang="ts">
  const items = [
    { label: 'Apple', id: 1 },
    { label: 'Banana', id: 2 },
    { label: 'Orange', id: 3 },
    { label: 'Peach', id: 4 },
  ]

  const options = [
    { label: 'xs', value: 'xs' },
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' },
    { label: 'xl', value: 'xl' },
  ]

  let selectedSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'
</script>

<CRadioGroup bind:value={selectedSize} {options} />

<CList {items} size={selectedSize} />

Divider

<script lang="ts">
  const items = [
    { label: 'Apple', id: 1 },
    { label: 'Banana', id: 2 },
    { label: 'Orange', id: 3 },
    { label: 'Peach', id: 4 },
  ]
</script>

<CList {items} divider />

Use with CInfoItem

<script>
  const items = [
    { title: 'Notification', subtitle: 'Some notification description', icon: 'no', },
    { title: 'Personal', subtitle: 'Some personal description', icon: 'per' },
    { title: 'Settings', subtitle: 'Some settings description', icon: 'se' },
    { title: 'Exit', subtitle: 'Some exit description', icon: 'ex' },
  ]

  let activeItem = ''

  const handleItemClick = e => {
    activeItem = e.detail.title
  }
</script>

<CList {items}
  clickable
  activeFn={item => activeItem === item.title}
  on:item-click={handleItemClick}
>
  <CInfoItem
    slot="item"
    let:active
    let:itemObj
    title={itemObj.title}
    subtitle={itemObj.subtitle}
  >
    <div slot="icon" class={`${itemObj.icon}`}></div>
    <div slot="append" class:checked-icon={active} class="text-6"></div>
  </CInfoItem>
</CList>
<style>
  .no {
    --at-apply: 'i-carbon-notification text-8';
  }
  .per {
    --at-apply: 'i-ic-round-person text-8';
  }
  .se {
    --at-apply: 'i-ic-sharp-settings text-8';
  }
  .ex {
    --at-apply: 'i-mingcute-exit-line text-8';
  }
  .checked-icon {
    --at-apply: 'i-ic-baseline-check';
  }
</style>

CList Props

• items

  any[]

  default: undefined

  The list items data.

• clickable

  boolean

  default: false

  Determine whether item in list is clickable or not.

• size

  'xs' | 'sm' | 'md' | 'lg' | 'xl'=

  default: undefined

  The size of list.

• activeFn

  (item: any) => boolean=

  default: undefined

  The function that compute the active status of item.

• divider

  boolean

  default: false

  Determine whether there is a divider between every item.

CList Events

• item-click

  Emit when item is clicked.

CList Slots

• empty

  Customize the empty content

• item

  Customize item

  Bindings:

  • itemObj any

    the item obj that holds the whole item data.

  • isClickable boolean

    Determine whether the item is clickable or not.

  • isActive boolean

    Determine whether the item is active or not.

CList Exports

CItem Props

• label

  string

  default:

  The label text.

• size

  'xs' | 'sm' | 'md' | 'lg' | 'xl'=

  default: undefined

  The size of item. Notice that default value is 'md' instead of undefined

• clickable

  boolean

  default: false

  Determine whether the item is clickable or not.

• active

  boolean

  default: false

  Determine whether the item is active or not. Which will lead to different styles.

CItem Events

• click

  Emit when the item is clicked. It only take effect when the clickable prop is set to true

CItem Slots

CItem Exports

CInfoItem Props

• title

  string

  default:

  The title of the item.

• subtitle

  string

  default:

  The subtitle of the item.

• align

  'start' | 'center' | 'end'

  default: center

  The vertical align method. Base on the CSS

• iconAlign

  'start' | 'center' | 'end'

  default: center

  The icon and title vertical align method. Also based on the CSS

• size

  'xs' | 'sm' | 'md' | 'lg' | 'xl'=

  default: undefined

  The size of item.

CInfoItem Events

CInfoItem Slots

• icon

  The icon content

• title

  Customize title content. Notice that this slot would override the title prop

• subtitle

  Customize subtitle content. Notice that this slot would override the subtitle prop

CInfoItem Exports