bootstrap-vue
Version:
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens
263 lines (262 loc) • 8.28 kB
JSON
{
"name": "@bootstrap-vue/card",
"version": "1.0.0",
"meta": {
"title": "Card",
"description": "A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.",
"components": [
{
"component": "BCard",
"props": [
{
"prop": "overlay",
"description": "When set, will overlay the card body on top of the image (if the card has an image)"
},
{
"prop": "noBody",
"description": "Disable rendering of the default inner card-body element"
},
{
"prop": "align",
"description": "Text alignment for the card's content: 'left', 'center' or 'right'"
},
{
"prop": "imgSrc",
"description": "URL for the optional image"
},
{
"prop": "imgAlt",
"description": "Value to set the image attribute 'alt'"
},
{
"prop": "imgWidth",
"description": "The value to set on the image's 'width' attribute"
},
{
"prop": "imgHeight",
"description": "The value to set on the image's 'height' attribute"
},
{
"prop": "imgTop",
"description": "Set if the image should appear at the top of the card"
},
{
"prop": "imgBottom",
"description": "Set if the image should appear at the bottom of the card"
},
{
"prop": "imgStart",
"description": "Set if the image should appear at the start (left) of the card"
},
{
"prop": "imgLeft",
"description": "Set if the image should appear at the start (left) of the card. Synonym for the 'left' prop"
},
{
"prop": "imgEnd",
"description": "Set if the image should appear at the end (right) of the card"
},
{
"prop": "imgRight",
"description": "Set if the image should appear at the end (right) of the card. Synonym for the 'right' prop"
}
],
"slots": [
{
"name": "default",
"description": "Content to place in the card"
},
{
"name": "footer",
"description": "For custom rendering of footer content"
},
{
"name": "header",
"description": "For custom rendering of header content"
}
]
},
{
"component": "BCardHeader",
"slots": [
{
"name": "default",
"description": "Content to place in the card header"
}
]
},
{
"component": "BCardFooter",
"slots": [
{
"name": "default",
"description": "Content to place in the card footer"
}
]
},
{
"component": "BCardBody",
"props": [
{
"prop": "overlay",
"description": "When set, will overlay the card body on top of the image (if the card has an image)"
}
],
"slots": [
{
"name": "default",
"description": "Content to place in the card body"
}
]
},
{
"component": "BCardTitle",
"slots": [
{
"name": "default",
"description": "Content to place in the card title"
}
]
},
{
"component": "BCardSubTitle",
"slots": [
{
"name": "default",
"description": "Content to place in the card sub-title"
}
]
},
{
"component": "BCardImg",
"props": [
{
"prop": "width",
"description": "The value to set on the image's 'width' attribute"
},
{
"prop": "height",
"description": "The value to set on the image's 'height' attribute"
},
{
"prop": "top",
"description": "Set if the image will be placed at the top of the card"
},
{
"prop": "bottom",
"description": "Set if the image will be placed at the bottom of the card"
},
{
"prop": "start",
"description": "Set if the image will be placed at the start (left) of the card"
},
{
"prop": "left",
"description": "Set if the image will be placed at the start (left) of the card. Synonym for the 'left' prop"
},
{
"prop": "end",
"description": "Set if the image will be placed at the end (right) of the card"
},
{
"prop": "right",
"description": "Set if the image will be placed at the end (right) of the card. Synonym for the 'right' prop"
},
{
"prop": "subTitleTextVariant",
"description": "Applies one of the Bootstrap theme color variants to the sub title text"
}
]
},
{
"component": "BCardImgLazy",
"props": [
{
"prop": "show",
"description": "If set to true, will force show the image specified via the 'src' prop"
},
{
"prop": "offset",
"description": "Number of pixels away from the viewport edge before the lazy image is loaded"
},
{
"prop": "blankSrc",
"description": "URL of placeholder image. If not set, an SVG placeholder placeholder will be used"
},
{
"prop": "blankColor",
"description": "CSS color of the blank SVG placeholder image. Has no effect if 'blank-src' is set"
},
{
"prop": "blankWidth",
"description": "Value of the 'width' attribute for the placeholder image"
},
{
"prop": "blankHeight",
"description": "Value of the 'height' attribute for the placeholder image"
},
{
"prop": "width",
"description": "The value to set on the image's 'width' attribute"
},
{
"prop": "height",
"description": "The value to set on the image's 'height' attribute"
},
{
"prop": "top",
"description": "Set if the image will be placed at the top of the card"
},
{
"prop": "bottom",
"description": "Set if the image will be placed at the bottom of the card"
},
{
"prop": "start",
"description": "Set if the image will be placed at the start (left) of the card"
},
{
"prop": "left",
"description": "Set if the image will be placed at the start (left) of the card. Synonym for the 'left' prop"
},
{
"prop": "end",
"description": "Set if the image will be placed at the end (right) of the card"
},
{
"prop": "right",
"description": "Set if the image will be placed at the end (right) of the card. Synonym for the 'right' prop"
}
]
},
{
"component": "BCardText",
"slots": [
{
"name": "default",
"description": "Content to place in the card text"
}
]
},
{
"component": "BCardGroup",
"props": [
{
"prop": "deck",
"description": "When set renders the card group with gutters between cards"
},
{
"prop": "columns",
"description": "When set, renders the card group in a masonry-like columnar style"
}
],
"slots": [
{
"name": "default",
"description": "Content (cards) to place in the card group"
}
]
}
]
}
}