jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added striped-columns

Browse Source
This commit is contained in:
victor
2022-12-13 12:19:12 +04:00
parent 48d1547d3c
commit 705908a4de
9 changed files with 155 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/components/table/examples/TableStripedColumnsExample.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

52
docs/components/table/table.md
View File

@@ -1,6 +1,7 @@
<script setup>
import TableExample from './examples/TableExample.vue';
import TableStripedExample from './examples/TableStripedExample.vue';
import TableStripedColumnsExample from './examples/TableStripedColumnsExample.vue';
import TableHoverableExample from './examples/TableHoverableExample.vue';
</script>
# Vue Table Component - Flowbite
@@ -115,6 +116,57 @@ import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from
```
## Striped columns example
<TableStripedColumnsExample />
```vue
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
```
## Hoverable example
<TableHoverableExample />