quasar/dist/api/QCarousel.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "type": "component",
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/carousel"
  },
  "props": {
    "fullscreen": {
      "type": "Boolean",
      "sync": true,
      "desc": "Fullscreen mode",
      "examples": [
        "v-model:fullscreen=\"isFullscreen\""
      ],
      "category": "behavior",
      "syncable": true
    },
    "no-route-fullscreen-exit": {
      "type": "Boolean",
      "desc": "Changing route app won't exit fullscreen",
      "category": "behavior"
    },
    "model-value": {
      "type": "Any",
      "desc": "Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.",
      "examples": [
        "v-model=\"panelName\""
      ],
      "category": "model"
    },
    "keep-alive": {
      "type": "Boolean",
      "desc": "Equivalent to using Vue's native <keep-alive> component on the content",
      "category": "behavior"
    },
    "keep-alive-include": {
      "type": [
        "String",
        "Array",
        "RegExp"
      ],
      "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names",
      "examples": [
        "a,b",
        "/a|b/",
        "['a', 'b']"
      ],
      "category": "behavior"
    },
    "keep-alive-exclude": {
      "type": [
        "String",
        "Array",
        "RegExp"
      ],
      "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names",
      "examples": [
        "a,b",
        "/a|b/",
        "['a', 'b']"
      ],
      "category": "behavior"
    },
    "keep-alive-max": {
      "type": "Number",
      "desc": "Equivalent to using Vue's native max prop for <keep-alive>",
      "category": "behavior"
    },
    "animated": {
      "type": "Boolean",
      "desc": "Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)",
      "category": "behavior"
    },
    "infinite": {
      "type": "Boolean",
      "desc": "Makes component appear as infinite (when reaching last panel, next one will become the first one)",
      "category": "behavior"
    },
    "swipeable": {
      "type": "Boolean",
      "desc": "Enable swipe events (may interfere with content's touch/mouse events)",
      "category": "behavior"
    },
    "vertical": {
      "type": "Boolean",
      "desc": "Default transitions and swipe actions will be on the vertical axis",
      "category": "behavior"
    },
    "transition-prev": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "transition",
      "default": "fade",
      "required": false
    },
    "transition-next": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "transition",
      "default": "fade",
      "required": false
    },
    "transition-duration": {
      "type": [
        "String",
        "Number"
      ],
      "desc": "Transition duration (in milliseconds, without unit)",
      "default": 300,
      "category": "transition",
      "addedIn": "v2.2",
      "required": false
    },
    "dark": {
      "type": "Boolean",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    },
    "height": {
      "type": "String",
      "desc": "Height of Carousel in CSS units, including unit name",
      "examples": [
        "16px",
        "2rem"
      ],
      "category": "style"
    },
    "padding": {
      "type": "Boolean",
      "desc": "Applies a default padding to each slide, according to the usage of 'arrows' and 'navigation' props",
      "category": "content"
    },
    "control-color": {
      "type": "String",
      "desc": "Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "control-text-color": {
      "type": "String",
      "desc": "Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "control-type": {
      "type": "String",
      "desc": "Type of button to use for controls (arrows, navigation)",
      "values": [
        "regular",
        "flat",
        "outline",
        "push",
        "unelevated"
      ],
      "category": "style"
    },
    "autoplay": {
      "type": [
        "Number",
        "Boolean"
      ],
      "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
      "default": false,
      "examples": [
        ":autoplay=\"2500\"",
        true,
        false
      ],
      "category": "behavior",
      "required": false
    },
    "arrows": {
      "type": "Boolean",
      "desc": "Show navigation arrow buttons",
      "category": "content"
    },
    "prev-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "content"
    },
    "next-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "content"
    },
    "navigation": {
      "type": "Boolean",
      "desc": "Show navigation dots",
      "category": "content"
    },
    "navigation-position": {
      "type": "String",
      "desc": "Side to stick navigation to",
      "default": "bottom/right",
      "values": [
        "top",
        "right",
        "bottom",
        "left"
      ],
      "category": "content",
      "required": false
    },
    "navigation-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "content"
    },
    "navigation-active-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention for the active (current slide) navigation icon; Make sure you have the icon library installed unless you are using 'img:' prefix",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "content"
    },
    "thumbnails": {
      "type": "Boolean",
      "desc": "Show thumbnails",
      "category": "content"
    }
  },
  "slots": {
    "default": {
      "desc": "Suggestion: QCarouselSlide"
    },
    "control": {
      "desc": "Slot specific for QCarouselControl"
    },
    "navigation-icon": {
      "desc": "Slot for navigation icon/btn; Suggestion: QBtn",
      "scope": {
        "index": {
          "type": "Number",
          "desc": "The 0-based index of corresponding slide"
        },
        "maxIndex": {
          "type": "Number",
          "desc": "The available number of slides"
        },
        "name": {
          "type": "Any",
          "desc": "The name of the corresponding slide"
        },
        "active": {
          "type": "Boolean",
          "desc": "Is this the current slide?"
        },
        "btnProps": {
          "type": "Object",
          "desc": "Default QBtn props that can be binded to your own QBtn"
        },
        "onClick": {
          "type": "Function",
          "desc": "Default trigger when clicked/tapped on",
          "params": {
            "evt": {
              "type": "Event",
              "desc": "JS event object",
              "required": true
            }
          },
          "returns": null
        }
      }
    }
  },
  "events": {
    "fullscreen": {
      "desc": "Emitted when fullscreen state changes",
      "params": {
        "value": {
          "type": "Boolean",
          "desc": "Fullscreen state (showing/hidden)"
        }
      }
    },
    "update:model-value": {
      "desc": "Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model",
      "params": {
        "value": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "New current panel name",
          "examples": [
            "dashboard"
          ]
        }
      }
    },
    "before-transition": {
      "desc": "Emitted before transitioning to a new panel",
      "params": {
        "newVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name towards transition is going",
          "examples": [
            "dashboard"
          ]
        },
        "oldVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name from which transition is happening",
          "examples": [
            "dashboard"
          ]
        }
      }
    },
    "transition": {
      "desc": "Emitted after component transitioned to a new panel",
      "params": {
        "newVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name towards transition has occurred",
          "examples": [
            "dashboard"
          ]
        },
        "oldVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name from which transition has happened",
          "examples": [
            "dashboard"
          ]
        }
      }
    }
  },
  "methods": {
    "toggleFullscreen": {
      "desc": "Toggle the view to be fullscreen or not fullscreen"
    },
    "setFullscreen": {
      "desc": "Enter the fullscreen view"
    },
    "exitFullscreen": {
      "desc": "Leave the fullscreen view"
    },
    "next": {
      "desc": "Go to next panel"
    },
    "previous": {
      "desc": "Go to previous panel"
    },
    "goTo": {
      "desc": "Go to specific panel",
      "params": {
        "panelName": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer",
          "required": true,
          "examples": [
            "dashboard"
          ]
        }
      }
    }
  }
}