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

Docs/ Nav List example for highlighting to match main Nav List example #2177

Merged
merged 5 commits into from
Oct 27, 2023
Merged

Docs/ Nav List example for highlighting to match main Nav List example #2177

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d868361
Clarify nav-list highlighting by matching the preceeding nav-list exa…
ddxv Oct 24, 2023
062288b
pnpm format
ddxv Oct 24, 2023
2d52bd8
Slight adjustments after discussion with Dominik and niktek and chang…
ddxv Oct 24, 2023
ad60198
Simplify to only needed code
ddxv Oct 27, 2023
f50e302
Redo change icon this time to (icon)
ddxv Oct 27, 2023
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
4 changes: 2 additions & 2 deletions sites/skeleton.dev/src/routes/(inner)/elements/lists/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@
<ul>
<li>
<a href="/elements/lists">
<span class="badge bg-primary-500">💀</span>
<span class="badge bg-primary-500">(icon)</span>
<span class="flex-auto">Skeleton</span>
</a>
</li>
Expand All @@ -196,7 +196,7 @@
</DocsPreview>
<p>To highlight active state, we recommend conditionally applying a background color to the anchor tag.</p>
<CodeBlock language="ts" code={`$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');`} />
<CodeBlock language="html" code={`<a {href} class="{classesActive(href)}">Page</a>`} />
<CodeBlock language="html" code={`<a href={href} class="{classesActive(href)}">Page</a>`} />
</section>
</svelte:fragment>
</DocsShell>