quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/pagination" }, "behavior": { "$listeners": { "desc": "All native events are being propagated (you don't need the '.native' modifier)" } }, "props": { "value": { "type": "Number", "desc": "Current page (must be between min/max)", "required": true, "examples": [ 3 ], "category": "model" }, "min": { "type": "Number", "desc": "Minimum page (must be lower than 'max')", "default": 1, "examples": [ 3 ], "category": "model" }, "max": { "type": "Number", "desc": "Number of last page (must be higher than 'min')", "default": 100, "required": true, "examples": [ 10 ], "category": "model" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style", "default": "primary" }, "text-color": { "type": "String", "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "active-color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style", "default": "primary", "addedIn": "v1.15.6" }, "active-text-color": { "type": "String", "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style", "addedIn": "v1.15.6" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color (useful when you are using it along with the 'input' prop)", "category": "style", "addedIn": "v1.4.2" }, "input-style": { "type": [ "Array", "String", "Object" ], "desc": "Style definitions to be attributed to the input (if using one)", "examples": [ "background-color: #ff0000", ":input-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "input-class": { "type": [ "Array", "String", "Object" ], "desc": "Class definitions to be attributed to the input (if using one)", "examples": [ "my-special-class", ":input-class=\"{ 'my-special-class': <condition> }\"" ], "category": "style" }, "size": { "type": "String", "desc": "Button size in CSS units, including unit name", "examples": [ "20px" ], "category": "style" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "input": { "type": "Boolean", "desc": "Use an input instead of buttons", "category": "content" }, "icon-prev": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content", "addedIn": "v.1.9.4" }, "icon-next": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content", "addedIn": "v.1.9.4" }, "icon-first": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content", "addedIn": "v.1.9.4" }, "icon-last": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content", "addedIn": "v.1.9.4" }, "to-fn": { "type": "Function", "desc": "Generate link for page buttons; For best performance, reference it from your scope and do not define it inline", "params": { "page": { "type": "Number", "desc": "Page number to navigate to", "examples": [ 2 ] } }, "returns": { "type": [ "Object", "String" ], "desc": "Object or String that can be passed to a <router-link> as `to` parameter" }, "examples": [ ":to-fn=\"page => ({ query: { page } })\"" ], "category": "content", "addedIn": "v1.2.6" }, "boundary-links": { "type": "Boolean", "desc": "Show boundary button links", "category": "content" }, "boundary-numbers": { "type": "Boolean", "desc": "Always show first and last page buttons (if not using 'input')", "category": "content" }, "direction-links": { "type": "Boolean", "desc": "Show direction buttons", "category": "content" }, "ellipses": { "type": "Boolean", "desc": "Show ellipses (...) when pages are available", "category": "content" }, "max-pages": { "type": "Number", "default": 0, "desc": "Maximum number of page links to display at a time; 0 means Infinite", "examples": [ 5 ], "category": "model" }, "ripple": { "type": [ "Boolean", "Object" ], "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons", "default": true, "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ], "category": "style", "addedIn": "v1.9.11" }, "round": { "type": "Boolean", "desc": "Makes a circle shaped button for all buttons", "category": "style", "addedIn": "v1.15.0" }, "rounded": { "type": "Boolean", "desc": "Applies a more prominent border-radius for a squared shape button for all buttons", "category": "style", "addedIn": "v1.15.0" }, "flat": { "type": "Boolean", "desc": "Use 'flat' design for current page button", "category": "style", "addedIn": "v1.15.6" }, "outline": { "type": "Boolean", "desc": "Use 'outline' design for current page button", "category": "style", "addedIn": "v1.15.0" }, "unelevated": { "type": "Boolean", "desc": "Remove shadow for current page button", "category": "style", "addedIn": "v1.15.0" }, "push": { "type": "Boolean", "desc": "Use 'push' design for current page button", "category": "style", "addedIn": "v1.15.0" }, "glossy": { "type": "Boolean", "desc": "Applies a glossy effect for all buttons", "category": "style", "addedIn": "v1.15.0" }, "dense": { "type": "Boolean", "desc": "Dense mode; occupies less space", "category": "style", "addedIn": "v1.15.0" }, "padding": { "type": "String", "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set", "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ], "category": "style", "addedIn": "v1.15.0" } }, "events": { "input": { "desc": "Emitted when the component needs to change the model; Is also used by v-model", "params": { "value": { "type": "String", "desc": "New model value", "required": true } } } }, "methods": { "set": { "desc": "Go directly to the specified page", "params": { "pageNumber": { "type": "Number", "desc": "Page number to go to", "examples": [ 3 ] } } }, "setByOffset": { "desc": "Increment/Decrement current page by offset", "params": { "offset": { "type": "Number", "desc": "Offset page, can be negative or positive", "examples": [ 3 ] } } } } }