docs: integrate @nuxt/ui-pro (#739)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Florent Delerue <florentdelerue@hotmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2023-11-02 16:44:44 +01:00
committed by GitHub
parent ed4b5e0077
commit 844b3185e9
42 changed files with 610 additions and 501 deletions

View File

@@ -13,7 +13,6 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-basic'
componentProps:
class: 'flex-1'
@@ -33,7 +32,6 @@ Use the `columns` prop to configure which columns to display. It's an array of o
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-columns'
componentProps:
class: 'flex-1'
@@ -45,7 +43,6 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-columns-selectable'
componentProps:
class: 'flex-1'
@@ -59,7 +56,6 @@ You can make the columns sortable by setting the `sortable` property to `true` i
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-columns-sortable'
componentProps:
class: 'flex-1'
@@ -82,7 +78,6 @@ Use the `sort-button` prop to customize the sort button in the header. You can p
::component-card{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
baseProps:
class: 'w-full'
columns:
@@ -187,7 +182,6 @@ The initial value of `sort` will be respected as the initial sort column and dir
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-reactive-sorting'
componentProps:
class: 'flex-1'
@@ -201,7 +195,6 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-selectable'
componentProps:
class: 'flex-1'
@@ -219,7 +212,6 @@ You can use this to navigate to a page, open a modal or even to select the row m
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-clickable'
componentProps:
class: 'flex-1'
@@ -233,7 +225,6 @@ You can easily use the [Input](/forms/input) component to filter the rows.
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-searchable'
componentProps:
class: 'flex-1'
@@ -247,7 +238,6 @@ You can easily use the [Pagination](/navigation/pagination) component to paginat
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-paginable'
componentProps:
class: 'flex-1'
@@ -265,7 +255,6 @@ You can also set it to `null` to hide the loading state.
::component-card
---
padding: false
overflowClass: 'overflow-x-auto'
baseProps:
class: 'w-full'
columns:
@@ -314,7 +303,6 @@ You can also set it to `null` to hide the empty state.
::component-card
---
padding: false
overflowClass: 'overflow-x-auto'
baseProps:
class: 'w-full'
columns:
@@ -380,7 +368,6 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-slots'
componentProps:
class: 'flex-1'
@@ -394,7 +381,6 @@ Use the `#loading-state` slot to customize the loading state.
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-loading-slot'
componentProps:
class: 'flex-1'
@@ -408,7 +394,6 @@ Use the `#empty-state` slot to customize the empty state.
::component-example{class="grid"}
---
padding: false
overflowClass: 'overflow-x-auto'
component: 'table-example-empty-slot'
componentProps:
class: 'flex-1'