CodeGroup
CodeGroup wraps a set of CodeTab children in a tabbed panel with a code-block frame. Give several groups the same SyncKey and they switch together, on every page, and remember the choice between visits.
Basic use
dotnet add package ShellDocs.Components --prerelease
<PackageReference Include="ShellDocs.Components" Version="0.1.17-alpha" />
Write it as an inline tag in the page, with a fenced block in each tab. Leave a blank line between the tags and the fences:
<CodeGroup>
<CodeTab Label="dotnet CLI">
```bash
dotnet add package ShellDocs.Components --prerelease
```
</CodeTab>
<CodeTab Label="PackageReference">
```xml
<PackageReference Include="ShellDocs.Components" Version="0.1.17-alpha" />
```
</CodeTab>
</CodeGroup>
Syncing tabs
Set the same SyncKey on every group that should stay in step. Pick a tab in either group below and the other follows:
dotnet add package ShellDocs.Core --prerelease
<PackageReference Include="ShellDocs.Core" Version="0.1.17-alpha" />
dotnet add package ShellDocs.Markdown --prerelease
<PackageReference Include="ShellDocs.Markdown" Version="0.1.17-alpha" />
SyncKey="pkg" is the convention on this site for install snippets. The selection is saved in localStorage, so it carries to other pages and to the next visit.
Rich tab content
Tab bodies are markdown, so a tab can hold several code blocks, prose, or other components.
shelldocs init MyDocs
cd docs/MyDocs.Docs
shelldocs dev
dotnet new blazor -o MyDocs.Docs
cd MyDocs.Docs
dotnet add package ShellDocs.Components --prerelease
Then wire up Program.cs and App.razor : see attach mode.
Props
CodeGroup
| Prop | Type | Default | Description |
|---|---|---|---|
SyncKey |
string? |
— |
Groups with the same key switch together, across pages, and remember the choice in localStorage. |
ChildContent |
RenderFragment? |
— |
The CodeTab children. Must be direct children. |
CodeTab
| Prop | Type | Default | Description |
|---|---|---|---|
LabelRequired |
string |
— |
Tab label. Also the value sync matches on : tabs with the same label in the same sync group switch together. |
ChildContent |
RenderFragment? |
— |
Tab body. |
How it works
The tab strip and every panel are rendered on the server. shelldocs.js switches panels through data-tabs, data-tab-target and data-tab-panel attributes, so a CodeGroup works on a static host with no Blazor runtime. It follows the WAI-ARIA tabs pattern : arrow keys move between tabs, Home and End jump to the first and last.
Sync matches tabs by Label. Two groups sharing a key only move together on labels they have in common.
CodeGroup and Tabs share this mechanism. Use Tabs when the panels are not code.