Anu

Appearance

On this page

List ​

Basic ​

AList is fully customizable and provides easy to use API to render list. It support ATypography props to render text quickly.

You can also use default slot to render your custom content if you don't want to use typography props.

  • Donut jujubes

  • Sesame snaps

  • I love jelly

  • Cake gummi

Customization

AList is highly customizable component. It uses CSS variables for its spacing so you can have full control over high it look. You can update this CSS variables via UnoCSS classes to change the appearance.

vue
<template>
  <AList class="[--a-list-gap:1rem]"></AList>
</template>

WARNING

When you override the list item via CSS variable, it's up to you to handle --a-spacing CSS var. For example, you are overriding list gap and don't want to consider the --a-spacing variable then you can simply override it via [--a-spacing:1]. However, if you want to allow spacing modification then write [--a-spacing:calc(1*var(--a-spacing))]

For in library example you can check .a-list-items-pill class styles.

Make list items clickable

If you want to make list item clickable (have cursor pointer), You can pass value property other than undefined.

ts
const items = [
  { text: 'Donut jujubes', value: null }, // value other than `undefined`
  { text: 'Sesame snaps' },
  { text: 'I love jelly' },
  { text: 'Cake gummi' },
]

With above items, first item will be clickable (have cursor pointer) and rest of the items will have default pointer.

In case if you want to make all the items clickable without adding value property to each item, you can use :model-value="null" prop to AList.

vue
<script lang="ts" setup>
const items = [
  { text: 'Donut jujubes' },
  { text: 'Sesame snaps' },
  { text: 'I love jelly' },
  { text: 'Cake gummi' },
]
</script>

<template>
  <ACard>
    <AList
      :model-value="null"
      :items="items"
    />
  </ACard>
</template>

Slots ​

Use before & after slot to add custom content before and after list items. There's also prepend & append slot for list item to append & prepend custom content.

  • Donut jujubes

    ⌘ 1

  • Sesame snaps

    ⌘ 2

  • I love jelly

    ⌘ 3

  • Cake gummi

    ⌘ 4

    • 4 items found

INFO

Default theme preset provides helpful class .kbd to render keyboard keys just like kbd element.

Avatar ​

You can also pass avatar props like src or icon to list item under $avatar property to render the desired avatar without writing extra markup.

You can also use avatar-append prop to render the avatar at the end instead of start.

  • Electronics

    Mobile, Earbuds, TV

  • Fashion

    T-shirt, Jeans, Shoes

  • Decor

    Fine Art, Dining

  • Sports

    Football, Cricket Kit

Taking flexibility to next level 🚀

AList supports rendering avatar & icon at the same time on desired location to improve the DX and reduce the markup.

If pass $avatar property and icon property at the same time, icon property will get precedence and AList will render icon.

Just like avatar-append, you can also use icon-append to render the action buttons for your list.

v-model Support ​

AList also support v-model. Use any value other than undefined to enable the v-model support.

If you are using AListItem in default slot of AList you can use handleListItemClick slot prop function to select the item value. handleListItemClick accepts option item as parameter.

  • Donut jujubes

  • Sesame snaps

  • I love jelly

  • Cake gummi

    • Selected: null

  • Donut jujubes

  • Sesame snaps

  • I love jelly

  • Cake gummi

    • Selected: null

TIP

For selection, AList uses useSelection. Hence, you can also use the multi prop to allow multiple selection.

Variants ​

AList also accepts layer props like variant, color & states to change the appearance of list.

  • Donut jujubes

  • Sesame snaps

  • I love jelly

  • Cake gummi

TIP

Use a-list-items-pill to create pill shaped list items. It just modifies some CSS to achieve the pill UI.

CSS Variables ​

AList comes with various CSS variables to customize the UI according to your need. You can check them in this section.

API ​

List

variant : LayerVariant
states : boolean
iconAppend : boolean
avatarAppend : boolean
items : AListPropItems

Items to render in list

multi : boolean

Enable selecting multiple list items

emitObject : boolean

Emit whole object when item is select instead of item.value

modelValue : any

Bind v-model value to selected list item

color : ColorProp
before : any

Render custom content before list items

default : { handleListItemClick: (item: string | number | AListItemProps) => void; }

Default slot to render custom content instead of AListItem

after : any

Render custom content after list items

item-prepend : { item: AListItemProps; }
item-content : { item: AListItemProps; }
item-append : { item: AListItemProps; }
update:modelValue => [value: any]

List item

variant : LayerVariant

Layer variant

states : boolean
disabled : boolean

Mark list item disabled

titleTag : string

Tag to use for title of the component

subtitleTag : string

Tag to use for subtitle of the component

textTag : string

Tag to use for text rendered via text prop

iconAppend : boolean

Render icon at the end instead of starting of list item

avatarAppend : boolean

Render avatar at the end instead of starting of list item

isActive : boolean

Mark list item as active

text : ConfigurableValue

Typography text content

icon : ConfigurableValue

List item icon

color : ColorProp

Layer color

title : ConfigurableValue

Typography title

subtitle : ConfigurableValue

Typography subtitle

value : any

List item value, makes list item clickable.

avatarProps : Record<string, any>

Props for rendering avatar.

default : { item: AListItemProps; }

Render custom content and override other slots.

prepend : { item: AListItemProps; }

Prepend custom content to the list item

content : { item: AListItemProps; }

Render custom content instead of ATypography preserving prepend and append slot usage

append : { item: AListItemProps; }

Append custom content to the list item

click:icon => []
click:avatar => []
click:iconAppend => []
click:avatarAppend => []

Released under the MIT License.

Copyright Š 2022-present JD Solanki