1.0.0-beta.4 • Published 2 years ago
@gits-id/list v1.0.0-beta.4
GITS List Component
Use List
component for creating list, grouping list and creating menus.
Installation
npm
npm i @gits-id/list
yarn
yarn add @gits-id/list
pnpm
pnpm i @gits-id/list
Usage
This package provides 5 components: List
, ListItem
, ListItemDivider
, ListItemHeader
, ListCollapse
.
Basic Usage
<script setup lang="ts">
import {List, ListItem, ListItemDivider} from '@gits-id/list';
import '@gits-id/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
1.0.0-beta.3
2 years ago
1.0.0-beta.4
2 years ago
1.0.0-beta.2
2 years ago
1.0.0-beta.1
2 years ago
0.15.2-alpha.10
2 years ago
0.15.0
2 years ago
0.16.0
2 years ago
0.15.1
2 years ago
0.16.1
2 years ago
0.15.2
2 years ago
0.12.0-alpha.3
3 years ago
0.14.0-alpha.48
3 years ago
0.13.20
3 years ago
0.14.0-alpha.60
3 years ago
0.13.6
3 years ago
0.13.9
3 years ago
0.12.0
3 years ago
0.13.0
3 years ago
0.14.0
2 years ago
0.14.2-alpha.40
2 years ago
0.14.1
2 years ago
0.14.0-alpha.1
3 years ago
0.14.0-alpha.0
3 years ago
0.13.5
3 years ago
0.12.0-alpha.24
3 years ago
0.12.0-alpha.22
3 years ago
0.12.0-alpha.23
3 years ago
0.13.11
3 years ago
0.14.2-alpha.12
2 years ago
0.13.16
3 years ago
0.13.15
3 years ago
0.13.13
3 years ago
0.13.17
3 years ago
0.11.10
3 years ago
0.11.2-alpha.6
3 years ago
0.11.9
3 years ago
0.11.0
3 years ago
0.11.2
3 years ago
0.11.3
3 years ago
0.11.5
3 years ago
0.11.6
3 years ago
0.10.12
3 years ago
0.10.11
3 years ago
0.10.3
3 years ago
0.10.3-alpha.1
3 years ago