Skip to content

ux: touch up tabs #22774

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

Merged
merged 4 commits into from
Jun 5, 2025
Merged

ux: touch up tabs #22774

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
b018493
update styling
ArthurFlag Jun 4, 2025
5ab4a2c
add group
ArthurFlag Jun 4, 2025
e21711c
add "group" to snippet
ArthurFlag Jun 4, 2025
d50378f
fix
ArthurFlag Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .vscode/docker.code-snippets
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@
"prefix": ["admonition", "tabs"],
"body": [
"",
"{{< tabs >}}",
"{{< tab name=\"$1\">}}",
"{{< tabs group=\"$1\" >}}",
"{{< tab name=\"$2\">}}",
"",
"$2",
"$3",
"",
"{{< /tab >}}",
"{{< tab name=\"$3\">}}",
"{{< tab name=\"$4\">}}",
"",
"$4",
"$5",
"",
"{{< /tab >}}",
"{{</tabs >}}",
Expand Down
12 changes: 12 additions & 0 deletions assets/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,3 +101,15 @@
.summary-bar {
@apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900;
}

.tabs {
@apply bg-blue/2 rounded-sm p-2;
}
.tablist {
@apply mb-1 border-b border-gray-100 dark:border-gray-800;
}

.tab-item {
@apply inline-block rounded-sm px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-900;
@apply dark:text-gray-200;
}
8 changes: 4 additions & 4 deletions content/manuals/ai/model-runner/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ You can now use the `docker model` command in the CLI and view and interact with

Models are cached locally.

{{< tabs >}}
{{< tabs group="release" >}}
{{< tab name="From Docker Desktop">}}

1. Select **Models** and select the **Docker Hub** tab.
Expand All @@ -99,14 +99,14 @@ Use the [`docker model pull` command](/reference/cli/docker/).

## Run a model

{{< tabs >}}
{{< tabs group="release" >}}
{{< tab name="From Docker Desktop">}}

Select **Models** and select the **Local** tab and click the play button.
The interactive chat screen opens.

{{< /tab >}}
{{< tab name="From the Docker CLI">}}
{{< tab name="From the Docker CLI" >}}

Use the [`docker model run` command](/reference/cli/docker/).

Expand All @@ -117,7 +117,7 @@ Use the [`docker model run` command](/reference/cli/docker/).

To troubleshoot potential issues, display the logs:

{{< tabs >}}
{{< tabs group="release" >}}
{{< tab name="From Docker Desktop">}}

Select **Models** and select the **Logs** tab.
Expand Down
7 changes: 3 additions & 4 deletions layouts/shortcodes/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@


<div
class="tabs"
{{ with $group }}
{{ if $persist }}
x-data="{ selected: $persist('{{ $first }}').as('{{ $groupID }}') }"
Expand All @@ -19,10 +20,10 @@
{{ end }}
aria-role="tabpanel"
>
<div aria-role="tablist" class="space-x-2">
<div aria-role="tablist" class="tablist">
{{ range (.Store.Get "tabs") }}
<button
class="p-1"
class="tab-item"
:class="selected === '{{ .name | urlize }}' &&
'border-blue border-b-4 dark:border-b-blue-600'"
{{ if $group }}
Expand All @@ -36,7 +37,6 @@
</button>
{{ end }}
</div>
<hr class="!mt-0" />
<div>
{{ range (.Store.Get "tabs") }}
<div
Expand All @@ -47,5 +47,4 @@
</div>
{{ end }}
</div>
<hr />
</div>