rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Docs: fix StackBlitz examples needing icons

Browse Source
This commit is contained in:
Julien Déramond 2023-12-18 09:22:33 +01:00
parent 958b610cfa
commit de85256e3f
No known key found for this signature in database
GPG Key ID: DCD226672FC08F31
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.3/helpers/icon-link.md
View File

@ -19,14 +19,14 @@ When icons are purely decorative, they should be hidden from assistive technolog
Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Icon link
</a>
{{< /example >}}
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@ -37,7 +37,7 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
Add `.icon-link-hover` to move the icon to the right on hover.
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@ -54,7 +54,7 @@ Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to chang
Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
Icon link
@ -63,7 +63,7 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
Customize the color by overriding the `--bs-link-*` CSS variable:
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@ -80,7 +80,7 @@ Customize the icon link Sass variables to modify all icon link styles across you
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
{{< example >}}
{{< example stackblitz_add_icons="true" >}}
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

8
site/layouts/partials/scripts.html
View File

@ -32,11 +32,13 @@
const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
const iconsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-icons-snippet')
StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, iconsSnippet, classes)
})
})
StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, iconsSnippet, classes) => {
const icons = iconsSnippet ? `{{ os.ReadFile "site/layouts/partials/icons.html" }}` : ""
const markup = `<!doctype html>
<html lang="en">
<head>
@ -48,7 +50,7 @@
<${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">
${icons.replace(/^/gm, ' ')}
<!-- Example Code -->
${htmlSnippet.replace(/^/gm, ' ')}
<!-- End Example Code -->

4
site/layouts/shortcodes/example.html
View File

@ -7,12 +7,14 @@
* lang: language used to display the code - default: "html"
* 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_icons: if extra icons should be added to StackBlitz - default: `false`
* stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
*/ -}}
{{- $id := .Get "id" -}}
{{- $class := .Get "class" -}}
{{- $lang := .Get "lang" | default "html" -}}
{{- $stackblitz_add_icons := .Get "stackblitz_add_icons" | default false -}}
{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $show_preview := .Get "show_preview" | default true -}}
@ -31,7 +33,7 @@
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }}{{ with $stackblitz_add_icons }} data-sb-icons-snippet="{{ $stackblitz_add_icons }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">