List

Sizes

Apple
Banana
Orange
Peach 
<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} />
<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} />
svelte
Click fold/expand code

Divider

Apple
Banana
Orange
Peach 
<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 />
<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 />
svelte
Click fold/expand code

Use with CInfoItem

Notification
Some notification description
Personal
Some personal description
Settings
Some settings description
Exit
Some exit description
<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>
<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>
svelte
Click fold/expand code

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

No data

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

  • default

CItem Exports

No data

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

No data

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

  • append

CInfoItem Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55