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

Add a way to skip or change things inside examples

Browse Source
This commit is contained in:
Louis-Maxime Piton 2024-03-06 16:51:43 +01:00
parent 192b7f785e
commit 3bad8d155d
2 changed files with 59 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
site/content/docs/5.3/components/list-group.md
View File

@ -333,6 +333,49 @@ Loop that generates the modifier classes with an overriding of CSS variables.
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.
{{< example >}}
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
{{ rendering }}
<p>Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
{{ end }}
{{ code }}...{{ end }}
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
{{ rendering }}
<p>Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
{{ end }}
{{ code }}
<p class="test">Lorem ipsum</p>
{{ end }}
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
{{ rendering }}
<p>Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
{{ end }}
{{ code }}{{ end }}
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
{{ rendering }}
<p>Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.</p>
{{ end }}
{{ code }}...{{ end }}
</div>
</div>
</div>
</div>
{{< /example >}}
<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">

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

@ -22,28 +22,29 @@
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $show_preview true }}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
{{ $content }}
{{ replaceRE `(?U){{-?\s*rendering\s*-?}}([\s\S]*){{-?\s*end\s*-?}}` "$1" (replaceRE `(?U){{-?\s*code\s*-?}}(?:[\s\S]*){{-?\s*end\s*-?}}` "" $content) | safeHTML }}
</div>
{{- end }}
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<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">
<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">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- end -}}
<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">
{{- if eq $show_preview true -}}
<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">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
{{- end -}}
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- if eq $show_markup true -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- $content = replaceRE `(?U)(?:\s*){{-?\s*code\s*-?}}([\s\S]*){{-?\s*end\s*-?}}(?:\s*)(\S)` "$1$2" (replaceRE `(?U)(?:\s*){{-?\s*rendering\s*-?}}(?:[\s\S]*){{-?\s*end\s*-?}}(?: *)\n` "" $content) -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end }}
</div>