UBuilder Pagination component
vue
`model
javascript
{
prop: 'page',
event: 'update:page',
};
`props
All props should integer. Prop validator checks is integer and equals or larger than min number.
javascript
{
page: { // min 1
type: [Number, String],
default: 1,
},
total: { // min 0
type: [Number, String],
required: true,
},
perPage: { // min 1
type: [Number, String],
default: 20,
},
pageButtonCount: { // min 5
type: [Number, String],
default: 9,
},
tag: { // USlotPagination only
type: String,
default: 'nav',
},
// USlotPagination only - slot rendering order.
// Don't pass props to custom named slots, but renders in slotOrder.
slotOrder: {
type: Array,
default: () => [ 'first', 'prev', 'page', 'next', 'last' ],
},
};
`slots
$3
vue
{{ no }}
{{ no }}
‹
‹
›
›
⋯
`$3
USlotPagination don't have default rendering. Should provide slot template.
vue
`rendering example
html
`default scss
scss
.u-pagination {
margin: 0;
padding: 0; & > ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
& > li {
margin: 0.25rem;
padding: 0;
min-width: 2.25rem;
color: #666;
text-align: center;
& > a {
display: flex;
color: #333;
border: 1px solid #ccc;
text-decoration: none;
outline-style: none;
box-sizing: border-box;
border-radius: 0.25rem;
min-width: 2.25rem;
margin: 0;
padding: 0.5rem;
justify-content: center;
&:hover {
color: black;
border-color: #666;
box-shadow: 0 0 0.25rem #666;
&.current,
&.disabled {
border-color: #ccc;
box-shadow: none;
}
}
&:focus {
color: black;
border-color: #666;
}
&.current {
background-color: #333;
color: white;
}
&.disabled {
background-color: #ccc;
color: #999;
}
}
}
}
}
``