@morpheme/list
v1.0.1
Published
Morpheme List Component
Downloads
123
Maintainers
Readme
Morpheme List
Morpheme List component is used for creating list, grouping list and creating menus.
Installation
npm
npm i @morpheme/list
yarn
yarn add @morpheme/list
pnpm
pnpm i @morpheme/list
Usage
This package provides 5 components: List
, ListItem
, ListItemDivider
, ListItemHeader
, ListCollapse
.
Basic Usage
<script setup lang="ts">
import {List, ListItem, ListItemDivider} from '@morpheme/list';
import '@morpheme/list/dist/style.css';
</script>
<template>
<List>
<ListItem>Item 1</ListItem>
<ListItem>Item 2</ListItem>
<ListItemDivider />
<ListItem>Item 3</ListItem>
<ListItemDivider />
<ListItem>Item 4</ListItem>
<ListItem>Item 5</ListItem>
</List>
</template>
List with icons
<template>
<List v-bind="args">
<ListItem prepend-icon="ri:user-line"> Item 1 </ListItem>
<ListItem prepend-icon="ri:search-line"> Item 2 </ListItem>
<ListItemDivider />
<ListItem append-icon="ri:search-line"> Item 3 </ListItem>
<ListItem append-icon="ri:search-line"> Item 4 </ListItem>
<ListItemDivider />
<ListItem prepend-icon="ri:home-line" append-icon="ri:search-line">
Item 5
</ListItem>
<ListItem prepend-icon="ri:user-line" append-icon="ri:arrow-downs-line">
Item 6
</ListItem>
</List>
</template>
Collapsing List
<template>
<List>
<ListItem prepend-icon="ri:home-2-line"> Home </ListItem>
<ListCollapse>
<template #activator="{isOpen, toggle}">
<ListItem
prepend-icon="ri:book-line"
append-icon="ri:arrow-down-s-line"
:append-icon-class="isOpen ? 'rotate-180' : ''"
@click="toggle"
>
Blog
</ListItem>
</template>
<List>
<ListItem> Add New Post </ListItem>
<ListItem> View Comments </ListItem>
</List>
</ListCollapse>
<ListCollapse>
<template #activator="{isOpen, toggle}">
<ListItem
prepend-icon="ri:user-line"
append-icon="ri:arrow-down-s-line"
:append-icon-class="isOpen ? 'rotate-180' : ''"
@click="toggle"
>
Shop
</ListItem>
</template>
<List>
<ListItem> View Dashboard </ListItem>
<ListItem> Sales </ListItem>
</List>
</ListCollapse>
</List>
</template>
Documentation
View full documentation here.
License
MIT