quasar

{ "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/pagination" }, "props": { "model-value": { "extends": "model-value", "type": "Number", "desc": "Current page (must be between min/max)" }, "min": { "type": [ "Number", "String" ], "desc": "Minimum page (must be lower than 'max')", "default": "1", "category": "model" }, "max": { "type": [ "Number", "String" ], "desc": "Number of last page (must be higher than 'min')", "required": true, "category": "model" }, "dark": { "extends": "dark", "desc": "Notify the component that the background is a dark color (useful when you are using it along with the 'input' prop)" }, "size": { "type": "String", "desc": "Button size in CSS units, including unit name", "examples": [ "'20px'" ], "category": "style" }, "disable": { "extends": "disable" }, "input": { "type": "Boolean", "desc": "Use an input instead of buttons", "category": "content" }, "icon-prev": { "extends": "icon" }, "icon-next": { "extends": "icon" }, "icon-first": { "extends": "icon" }, "icon-last": { "extends": "icon" }, "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" } }, "returns": { "type": [ "Object", "String" ], "desc": "Object or String that can be passed to a <router-link> as 'to' parameter" }, "examples": [ "page => ({ query: { page } })" ], "category": "content" }, "boundary-links": { "type": [ "Boolean", "null" ], "default": "null", "desc": "Show boundary button links", "category": "content" }, "boundary-numbers": { "type": [ "Boolean", "null" ], "default": "null", "desc": "Always show first and last page buttons (if not using 'input')", "category": "content" }, "direction-links": { "type": [ "Boolean", "null" ], "default": "null", "desc": "Show direction buttons", "category": "content" }, "ellipses": { "type": [ "Boolean", "null" ], "default": "null", "desc": "Show ellipses (...) when pages are available", "category": "content" }, "max-pages": { "type": [ "Number", "String" ], "default": "0", "desc": "Maximum number of page links to display at a time; 0 means Infinite", "category": "content" }, "flat": { "type": "Boolean", "desc": "Use 'flat' design for non-active buttons (it's the default option)", "category": "style" }, "outline": { "type": "Boolean", "desc": "Use 'outline' design for non-active buttons", "category": "style" }, "unelevated": { "type": "Boolean", "desc": "Remove shadow for non-active buttons", "category": "style" }, "push": { "type": "Boolean", "desc": "Use 'push' design for non-active buttons", "category": "style" }, "color": { "extends": "color", "desc": "Color name from the Quasar Color Palette for the non-active buttons", "default": "'primary'" }, "text-color": { "extends": "text-color", "desc": "Text color name from the Quasar Color Palette for the ACTIVE buttons" }, "active-design": { "type": "String", "desc": "The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)", "values": [ "'flat'", "'outline'", "'push'", "'unelevated'", "''" ], "default": "''", "category": "style", "addedIn": "v2.10" }, "active-color": { "extends": "color", "desc": "Color name from the Quasar Color Palette for the ACTIVE button", "default": "'primary'", "__runtimeDefault": true }, "active-text-color": { "extends": "text-color", "desc": "Text color name from the Quasar Color Palette for the ACTIVE button" }, "round": { "type": "Boolean", "desc": "Makes a circle shaped button for all buttons", "category": "style" }, "rounded": { "type": "Boolean", "desc": "Applies a more prominent border-radius for a squared shape button for all buttons", "category": "style" }, "glossy": { "type": "Boolean", "desc": "Applies a glossy effect for all buttons", "category": "style" }, "gutter": { "type": "String", "desc": "Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)", "default": "'2px'", "__runtimeDefault": true, "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ], "category": "style", "addedIn": "v2.10" }, "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'" ], "default": "'3px 2px'", "category": "style" }, "input-style": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the input (if using one)", "examples": [ "'background-color: #ff0000'", "{ backgroundColor: '#ff0000' }" ], "category": "style" }, "input-class": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the input (if using one)", "examples": [ "'my-special-class'", "{ 'my-special-class': true }" ], "category": "style" }, "ripple": { "type": [ "Boolean", "Object", "null" ], "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", "__runtimeDefault": true, "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ], "category": "style" } }, "events": { "update:model-value": { "extends": "update:model-value", "params": { "value": { "type": "Number" } } } }, "methods": { "set": { "desc": "Go directly to the specified page", "params": { "pageNumber": { "type": "Number", "desc": "Page number to go to" } }, "returns": null }, "setByOffset": { "desc": "Increment/Decrement current page by offset", "params": { "offset": { "type": "Number", "desc": "Offset page, can be negative or positive" } }, "returns": null } } }