mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 00:40:34 +01:00
@@ -46,6 +46,22 @@ props:
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
|
### Disabled :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||||
|
|
||||||
|
Use the `disabled` prop to disable all the buttons.
|
||||||
|
|
||||||
|
::component-card
|
||||||
|
---
|
||||||
|
baseProps:
|
||||||
|
modelValue: 1
|
||||||
|
total: 100
|
||||||
|
showLast: true
|
||||||
|
showFirst: true
|
||||||
|
props:
|
||||||
|
disabled: true
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
### Active / Inactive
|
### Active / Inactive
|
||||||
|
|
||||||
Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
|
Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<UButton
|
<UButton
|
||||||
v-if="firstButton && showFirst"
|
v-if="firstButton && showFirst"
|
||||||
:size="size"
|
:size="size"
|
||||||
:disabled="!canGoFirstOrPrev"
|
:disabled="!canGoFirstOrPrev || disabled"
|
||||||
:class="[ui.base, ui.rounded]"
|
:class="[ui.base, ui.rounded]"
|
||||||
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
|
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
|
||||||
:ui="{ rounded: '' }"
|
:ui="{ rounded: '' }"
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
<UButton
|
<UButton
|
||||||
v-if="prevButton"
|
v-if="prevButton"
|
||||||
:size="size"
|
:size="size"
|
||||||
:disabled="!canGoFirstOrPrev"
|
:disabled="!canGoFirstOrPrev || disabled"
|
||||||
:class="[ui.base, ui.rounded]"
|
:class="[ui.base, ui.rounded]"
|
||||||
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
|
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
|
||||||
:ui="{ rounded: '' }"
|
:ui="{ rounded: '' }"
|
||||||
@@ -30,6 +30,7 @@
|
|||||||
v-for="(page, index) of displayedPages"
|
v-for="(page, index) of displayedPages"
|
||||||
:key="`${page}-${index}`"
|
:key="`${page}-${index}`"
|
||||||
:size="size"
|
:size="size"
|
||||||
|
:disabled="disabled"
|
||||||
:label="`${page}`"
|
:label="`${page}`"
|
||||||
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
|
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
|
||||||
:class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
|
:class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
|
||||||
@@ -41,7 +42,7 @@
|
|||||||
<UButton
|
<UButton
|
||||||
v-if="nextButton"
|
v-if="nextButton"
|
||||||
:size="size"
|
:size="size"
|
||||||
:disabled="!canGoLastOrNext"
|
:disabled="!canGoLastOrNext || disabled"
|
||||||
:class="[ui.base, ui.rounded]"
|
:class="[ui.base, ui.rounded]"
|
||||||
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
|
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
|
||||||
:ui="{ rounded: '' }"
|
:ui="{ rounded: '' }"
|
||||||
@@ -54,7 +55,7 @@
|
|||||||
<UButton
|
<UButton
|
||||||
v-if="lastButton && showLast"
|
v-if="lastButton && showLast"
|
||||||
:size="size"
|
:size="size"
|
||||||
:disabled="!canGoLastOrNext"
|
:disabled="!canGoLastOrNext || disabled"
|
||||||
:class="[ui.base, ui.rounded]"
|
:class="[ui.base, ui.rounded]"
|
||||||
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
|
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
|
||||||
:ui="{ rounded: '' }"
|
:ui="{ rounded: '' }"
|
||||||
@@ -105,6 +106,10 @@ export default defineComponent({
|
|||||||
return value >= 5 && value < Number.MAX_VALUE
|
return value >= 5 && value < Number.MAX_VALUE
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
size: {
|
size: {
|
||||||
type: String as PropType<ButtonSize>,
|
type: String as PropType<ButtonSize>,
|
||||||
default: () => config.default.size,
|
default: () => config.default.size,
|
||||||
|
|||||||
Reference in New Issue
Block a user