Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Add a way to skip some doc stuff #39747

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Docs: Add a way to skip some doc stuff #39747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3bad8d1
Add a way to skip or change things inside examples
louismaximepiton Mar 6, 2024
0b040ce
Merge branch 'main' into main-lmp-add-skip-tag
louismaximepiton Mar 6, 2024
8e0d181
fix ids
louismaximepiton Mar 6, 2024
9424fa3
Easier syntax
louismaximepiton Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 37 additions & 0 deletions site/content/docs/5.3/components/list-group.md
View file
Open in desktop
Expand Up @@ -333,6 +333,43 @@ 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-tab2" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list2" data-bs-toggle="tab" href="#list-home2" role="tab" aria-controls="list-home2">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list2" data-bs-toggle="tab" href="#list-profile2" role="tab" aria-controls="list-profile2">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list2" data-bs-toggle="tab" href="#list-messages2" role="tab" aria-controls="list-messages2">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list2" data-bs-toggle="tab" href="#list-settings2" role="tab" aria-controls="list-settings2">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent2">
<div class="tab-pane fade show active" id="list-home2" role="tabpanel" aria-labelledby="list-home-list2">
{{ skip ... }}
<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>
{{ /skip }}
</div>
<div class="tab-pane fade" id="list-profile2" role="tabpanel" aria-labelledby="list-profile-list2">
{{ skip <p class="test">Lorem Ipsum</p>}}
<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>
{{ /skip }}
</div>
<div class="tab-pane fade" id="list-messages2" role="tabpanel" aria-labelledby="list-messages-list2">
{{ skip }}
<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>
{{ /skip }}
</div>
<div class="tab-pane fade" id="list-settings2" role="tabpanel" aria-labelledby="list-settings-list2">
{{ skip ... }}
<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>
{{ /skip }}
</div>
</div>
</div>
</div>
{{< /example >}}

<div class="bd-example" role="tabpanel">
<div class="row">
<div class="col-4">
Expand Down
31 changes: 16 additions & 15 deletions site/layouts/shortcodes/example.html
View file
Open in desktop
Expand Up @@ -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){{.*skip.*}}` "" $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*skip\s+([^\s].*)?\s*}}[\s\S]*{{.*skip.*}}[\s]*<` "$1<" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end }}
</div>