1.0.0-beta.4 • Published 1 year 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
1 year ago
1.0.0-beta.4
1 year ago
1.0.0-beta.2
1 year ago
1.0.0-beta.1
1 year ago
0.15.2-alpha.10
1 year ago
0.15.0
1 year ago
0.16.0
1 year ago
0.15.1
1 year ago
0.16.1
1 year ago
0.15.2
1 year ago
0.12.0-alpha.3
2 years ago
0.14.0-alpha.48
1 year ago
0.13.20
1 year ago
0.14.0-alpha.60
1 year ago
0.13.6
1 year ago
0.13.9
1 year ago
0.12.0
1 year ago
0.13.0
1 year ago
0.14.0
1 year ago
0.14.2-alpha.40
1 year ago
0.14.1
1 year ago
0.14.0-alpha.1
1 year ago
0.14.0-alpha.0
1 year ago
0.13.5
1 year ago
0.12.0-alpha.24
2 years ago
0.12.0-alpha.22
2 years ago
0.12.0-alpha.23
2 years ago
0.13.11
1 year ago
0.14.2-alpha.12
1 year ago
0.13.16
1 year ago
0.13.15
1 year ago
0.13.13
1 year ago
0.13.17
1 year ago
0.11.10
2 years ago
0.11.2-alpha.6
2 years ago
0.11.9
2 years ago
0.11.0
2 years ago
0.11.2
2 years ago
0.11.3
2 years ago
0.11.5
2 years ago
0.11.6
2 years ago
0.10.12
2 years ago
0.10.11
2 years ago
0.10.3
2 years ago
0.10.3-alpha.1
2 years ago