From 466df8f9a1860a3639aaf498c8ce3ec5f079237a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 28 Aug 2019 15:19:24 -0300 Subject: [PATCH 1/2] chore(docs): minor updates to the carousel docs --- src/components/carousel/README.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/components/carousel/README.md b/src/components/carousel/README.md index 14973f77476..97a26694e30 100644 --- a/src/components/carousel/README.md +++ b/src/components/carousel/README.md @@ -136,6 +136,36 @@ Set the prop `indicators` to show the slide indicator buttons. Both indicators and controls can be set at the same time or independently. +## Carousel slide content + +`b-carousel-slide` provides several props and slots for placing content in the slide. + +### Props + +- `caption` Text to use as the main title on the slide (placed inside the inner element which has + the class `carousel-caption`) +- `text` Textual placed under the title (placed inside the inner element which has + the class `carousel-caption`) +- `img-src` URL of image to be placed into the background of the slide +- `caption-html` Alternate prop to the `caption` prop, which supperts HTML strings +- `html` Alternate prop to the `text` prop, which supperts HTML strings + +

+ Warning: Be cautious of using the cpation-html and html + props to display user supplied content, as it may make your application vulnerable to + + XSS attacks, if you do not first + sanitize the + user supplied string. +

+ +### Named slots + +- `default` content that will be placed inside of the inner element which has the class + `carousel-caption`. Appears after any content from the `caption` and `text` props. +- `img` content to place into the background of the slide. Despite the slot's name, you can place + almost any content in this slot in lieu of using the `default` slot or `caption` and `text` props. + ## Carousel animation Carousel, by default, uses a sliding animation. You can change the slide animation to a cross-fade From bc710f0c0ecdf18cbb249f8c15d4fa2ede9caeea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 28 Aug 2019 22:55:12 +0200 Subject: [PATCH 2/2] Update README.md --- src/components/carousel/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/carousel/README.md b/src/components/carousel/README.md index 97a26694e30..493451bb682 100644 --- a/src/components/carousel/README.md +++ b/src/components/carousel/README.md @@ -144,14 +144,14 @@ Both indicators and controls can be set at the same time or independently. - `caption` Text to use as the main title on the slide (placed inside the inner element which has the class `carousel-caption`) -- `text` Textual placed under the title (placed inside the inner element which has - the class `carousel-caption`) +- `text` Textual placed under the title (placed inside the inner element which has the class + `carousel-caption`) - `img-src` URL of image to be placed into the background of the slide -- `caption-html` Alternate prop to the `caption` prop, which supperts HTML strings -- `html` Alternate prop to the `text` prop, which supperts HTML strings +- `caption-html` Alternate prop to the `caption` prop, which supports HTML strings +- `html` Alternate prop to the `text` prop, which supports HTML strings

- Warning: Be cautious of using the cpation-html and html + Warning: Be cautious of using the caption-html and html props to display user supplied content, as it may make your application vulnerable to XSS attacks, if you do not first @@ -162,7 +162,7 @@ Both indicators and controls can be set at the same time or independently. ### Named slots - `default` content that will be placed inside of the inner element which has the class - `carousel-caption`. Appears after any content from the `caption` and `text` props. + `carousel-caption`. Appears after any content from the `caption` and `text` props. - `img` content to place into the background of the slide. Despite the slot's name, you can place almost any content in this slot in lieu of using the `default` slot or `caption` and `text` props.