mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
docs: flatten side nav hierarchy, remove recipes (#1430)
* style(docs): remove bottom margin in index route * docs: flatten side nav hierarchy * docs(accordion): move expandable accordion recipe * docs(breadcrumb): move breadcrumb trail recipe * docs: remove recipes
This commit is contained in:
metonym
GitHub
parent
98974fba7e
commit
e3978e883b
11 changed files with 54 additions and 218 deletions
|
|
@ -11,7 +11,6 @@
|
|||
SkipToContent,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
Tag,
|
||||
} from "carbon-components-svelte";
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
$: components = $layout.children.filter(
|
||||
(child) => child.title === "components"
|
||||
)[0];
|
||||
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
if (isMobile) isSideNavOpen = false;
|
||||
|
|
@ -99,48 +97,33 @@
|
|||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||
text="Components"
|
||||
>
|
||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="red"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
Deprecated
|
||||
</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="green"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
New
|
||||
</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||
{#each recipes.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="red"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
Deprecated
|
||||
</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag
|
||||
size="sm"
|
||||
type="green"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
New
|
||||
</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
|
||||
|
||||
### Default
|
||||
|
||||
<Accordion>
|
||||
|
|
@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
|
|||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
### Programmatic example
|
||||
|
||||
This example demonstrates how a list of items can be programmatically expanded and collapsed.
|
||||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
||||
### Extra-large size
|
||||
|
||||
<Accordion size="xl">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ components: ["Breadcrumb", "BreadcrumbItem"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
|
||||
|
||||
### Default
|
||||
|
||||
<Breadcrumb>
|
||||
|
|
@ -43,6 +41,10 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
|
|||
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### Breadcrumb trail
|
||||
|
||||
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Breadcrumb noTrailingSlash skeleton count={3} />
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
export let items = [
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Natural Language Classifier",
|
||||
description:
|
||||
|
|
@ -17,26 +19,17 @@
|
|||
},
|
||||
];
|
||||
|
||||
import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
on:click="{() => {
|
||||
open = !open;
|
||||
}}"
|
||||
>
|
||||
<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
<Accordion>
|
||||
{#each items as item}
|
||||
<AccordionItem open="{open}">
|
||||
<h5 slot="title">{item.title}</h5>
|
||||
<AccordionItem title="{item.title}" open="{open}">
|
||||
<p>{item.description}</p>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,17 @@
|
|||
<script>
|
||||
/**
|
||||
* @type {{ href?: string; text: string; }[]} [items=[]]
|
||||
*/
|
||||
export let items = [
|
||||
import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
|
||||
|
||||
const items = [
|
||||
{ href: "/", text: "Dashboard" },
|
||||
{ href: "/reports", text: "Annual reports" },
|
||||
{ href: "/reports/2019", text: "2019" },
|
||||
];
|
||||
|
||||
import {
|
||||
Row,
|
||||
Column,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
} from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<Column>
|
||||
<Breadcrumb>
|
||||
{#each items as item, i}
|
||||
<BreadcrumbItem
|
||||
href="{item.href}"
|
||||
isCurrentPage="{i === items.length - 1}"
|
||||
>
|
||||
{item.text}
|
||||
</BreadcrumbItem>
|
||||
{/each}
|
||||
</Breadcrumb>
|
||||
</Column>
|
||||
</Row>
|
||||
<Breadcrumb>
|
||||
{#each items as item, i}
|
||||
<BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
|
||||
{item.text}
|
||||
</BreadcrumbItem>
|
||||
{/each}
|
||||
</Breadcrumb>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</script>
|
||||
|
||||
<Content>
|
||||
<Grid style="margin-bottom: var(--cds-layout-06);">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>Carbon Components Svelte</h1>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Breadcrumb trail
|
||||
|
||||
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Expandable accordion
|
||||
|
||||
This example expands and collapses all accordion items.
|
||||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import { AspectRatio, Tile, Column } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Tile (16x9 ratio)
|
||||
|
||||
<Column lg={8}>
|
||||
<AspectRatio ratio="16x9">
|
||||
<Tile style="height: 100%">Content</Tile>
|
||||
</AspectRatio>
|
||||
</Column>
|
||||
Loading…
Add table
Add a link
Reference in a new issue