diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 8b22686ad50f..4fb3df9c79d3 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -25,7 +25,7 @@ To render an accordion that's expanded by default: - add the `.show` class on the `.accordion-collapse` element. - drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. -{{< example >}} +{{< example button_label="standard accordion example">}}

@@ -70,7 +70,7 @@ To render an accordion that's expanded by default: Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. -{{< example class="bg-body-secondary" >}} +{{< example class="bg-body-secondary" button_label="flush accordion example">}}

@@ -109,7 +109,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. -{{< example >}} +{{< example button_label="always opened accordion example">}}

diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md index 8e3d99f537ab..8027b82455c7 100644 --- a/site/content/docs/5.3/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: -{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}} +{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" button_label="JavaScript example to trigger our live alert demo">}} ### Link color @@ -152,23 +152,23 @@ When an alert is dismissed, the element is completely removed from the page stru As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}} +{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" button_label="CSS variables for Alerts" >}} ### Sass variables -{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} +{{< scss-docs name="alert-variables" file="scss/_variables.scss" button_label="Sass variables for Alerts" >}} ### Sass mixins {{< deprecated-in "5.3.0" >}} -{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} +{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" button_label="Sass mixins for Alerts" >}} ### Sass loops Loop that generates the modifier classes with an overriding of CSS variables. -{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" button_label="Sass loops for Alerts" >}} ## JavaScript behavior @@ -176,6 +176,8 @@ Loop that generates the modifier classes with an overriding of CSS variables. Initialize elements as alerts +alerts' initialization example + ```js const alertList = document.querySelectorAll('.alert') const alerts = [...alertList].map(element => new bootstrap.Alert(element)) @@ -189,7 +191,7 @@ See the [triggers](#triggers) section for more details. ### Triggers -{{% js-dismiss "alert" %}} +{{% js-dismiss "alert" 1 %}} **Note that closing an alert will remove it from the DOM.** diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 5b398e6814fc..0ff604a2896c 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -8,6 +8,7 @@ * show_markup: if the markup should be output in the HTML - default: `true` * show_preview: if the preview should be output in the HTML - default: `true` * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` + * button_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" */ -}} {{- $id := .Get "id" -}} @@ -16,6 +17,7 @@ {{- $show_markup := .Get "show_markup" | default true -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- $content := .Inner -}} @@ -31,10 +33,10 @@
{{ $lang }}
- -
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index 8eed4a0eb18e..1876e9e59b81 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -1,12 +1,16 @@ {{- /* - Usage: `js-docs name="name" file="file/_location.js` + Usage: `js-docs name="name" file="file/_location.js button_label="label"` Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"` comments in the docs. + + Optional parameters: + * button_label: label to apply to complete 'Copy to clipboard' button - default: "" */ -}} {{- $name := .Get "name" -}} {{- $file := .Get "file" -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- /* If any parameters are missing, print an error and exit */ -}} {{- if or (not $name) (not $file) -}} @@ -38,7 +42,7 @@ {{- $file -}}
-
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 6e7c129f4c29..65592e37058c 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -1,16 +1,18 @@ {{- /* - Usage: `scss-docs name="name" file="file/_location.scss"` + Usage: `scss-docs name="name" file="file/_location.scss" button_label="label"` Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"` comments in the docs. Optional parameters: * strip-default: Remove the ` !default` flag from variable assignments - default: `true` + * button_label: label to apply to complete 'Copy to clipboard' button - default: "" */ -}} {{- $name := .Get "name" -}} {{- $file := .Get "file" -}} {{- $strip_default := .Get "strip-default" | default "true" -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- /* If any parameters are missing, print an error and exit */ -}} {{- if or (not $name) (not $file) -}} @@ -51,7 +53,7 @@ {{- $file -}}
-