mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Align v10.36 (#696)
* chore(deps-dev): upgrade carbon-components to v10.36.0 * feat(structured-list): add condensed, flush props * fix(structured-list): deprecate the border prop * fix(code-snippet): set min/max height for multi-line code snippet #656 Fixes #656 * fix(image-loader): make SSR compatible using a window type check guard * docs(tag): add separate disabled example for filterable/interactive tags * docs: update number of supported chart types * feat(side-nav): support rail variant * feat(ui-shell): add isSelected prop to HeaderNavItem * fix(ui-shell): default isSelected to false in SideNavMenuItem * fix(text-area): forward missing keydown event #665 Fixes #665 * feat: forward keyup event to components with inputs * feat(checkbox): make labelText slottable #563 Closes #563 * feat: make labelText slottable Related #563 * docs(component-api): account for undefined type * docs(ui-shell): link to correct rail source * fix(ui-shell): default isSelected in HeaderNavItem to false
This commit is contained in:
Eric Liu
GitHub
parent
099fb84767
commit
8ddf2def8b
57 changed files with 574 additions and 105 deletions
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"carbon-components": "10.35.0",
|
||||
"carbon-components": "10.36.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"mdsvex": "^0.8.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
|
|
|||
|
|
@ -715,7 +715,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "check", "detail": "boolean" },
|
||||
{ "type": "forwarded", "name": "click", "element": "CheckboxSkeleton" },
|
||||
|
|
@ -1410,6 +1417,7 @@
|
|||
"detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }"
|
||||
},
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" },
|
||||
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
|
||||
|
|
@ -2522,10 +2530,18 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "input", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
"typedefs": [],
|
||||
|
|
@ -3216,7 +3232,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "keydown", "element": "label" },
|
||||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
|
|
@ -3330,7 +3353,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "add", "detail": "FileList" },
|
||||
{ "type": "forwarded", "name": "dragover", "element": "div" },
|
||||
|
|
@ -4078,6 +4108,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "isSelected",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to select the item",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ref",
|
||||
"kind": "let",
|
||||
|
|
@ -5876,6 +5916,7 @@
|
|||
},
|
||||
{ "type": "dispatched", "name": "clear", "detail": "any" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
|
|
@ -7158,7 +7199,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -7167,6 +7215,7 @@
|
|||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "input", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
|
|
@ -7542,7 +7591,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [{ "type": "forwarded", "name": "change", "element": "input" }],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
|
|
@ -8009,7 +8065,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "expand", "detail": "any" },
|
||||
{ "type": "dispatched", "name": "collapse", "detail": "any" },
|
||||
|
|
@ -8034,6 +8097,7 @@
|
|||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "dispatched", "name": "clear" }
|
||||
],
|
||||
"typedefs": [],
|
||||
|
|
@ -8235,7 +8299,15 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "change", "detail": "string" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "select" }
|
||||
|
|
@ -8477,6 +8549,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "rail",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the rail variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ariaLabel",
|
||||
"kind": "let",
|
||||
|
|
@ -8637,6 +8719,7 @@
|
|||
"kind": "let",
|
||||
"description": "Set to `true` to select the item",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
|
|
@ -8963,7 +9046,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -9022,6 +9112,26 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "condensed",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the condensed variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "flush",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to flush the list",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selection",
|
||||
"kind": "let",
|
||||
|
|
@ -10017,7 +10127,14 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -10025,6 +10142,8 @@
|
|||
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
|
||||
{ "type": "forwarded", "name": "change", "element": "textarea" },
|
||||
{ "type": "forwarded", "name": "input", "element": "textarea" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "textarea" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "textarea" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "textarea" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "textarea" }
|
||||
],
|
||||
|
|
@ -10239,7 +10358,14 @@
|
|||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -10248,6 +10374,7 @@
|
|||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "input", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
|
|
@ -10496,7 +10623,15 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -10504,6 +10639,8 @@
|
|||
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
|
||||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "input", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
|
|
@ -10593,7 +10730,15 @@
|
|||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
@ -10797,7 +10942,14 @@
|
|||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"type": "dispatched",
|
||||
|
|
@ -10851,7 +11003,14 @@
|
|||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
|
|
|
|||
|
|
@ -78,10 +78,10 @@
|
|||
{/if}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop.type.split(" | ") as type, i (type)}
|
||||
{#each (prop.type || "").split(" | ") as type, i (type)}
|
||||
<div
|
||||
class="cell"
|
||||
style="z-index: {prop.type.split(' | ').length - i}"
|
||||
style="z-index: {(prop.type || '').split(' | ').length - i}"
|
||||
>
|
||||
{#if type.startsWith("typeof")}
|
||||
<TooltipDefinition
|
||||
|
|
|
|||
|
|
@ -52,6 +52,94 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
### Condensed variant
|
||||
|
||||
<StructuredList condensed>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
### Flush
|
||||
|
||||
<StructuredList flush>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
### Selectable rows
|
||||
|
||||
<StructuredList selection selected="row-1-value">
|
||||
|
|
|
|||
|
|
@ -49,6 +49,12 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
|
|||
Set `interactive` to `true` to render a `button` element instead of a `div`.
|
||||
|
||||
<Tag interactive>Machine learning</Tag>
|
||||
|
||||
### Disabled
|
||||
|
||||
The filterable and interactive tag variants have a disabled state.
|
||||
|
||||
<Tag filter disabled>Machine learning</Tag>
|
||||
<Tag interactive disabled>Machine learning</Tag>
|
||||
|
||||
### Skeleton
|
||||
|
|
|
|||
|
|
@ -36,6 +36,12 @@ The hamburger menu will automatically be rendered if the `SideNav` component is
|
|||
|
||||
<FileSource src="/framed/UIShell/HeaderNav" />
|
||||
|
||||
### Header with side navigation (rail)
|
||||
|
||||
Set `rail` to `true` on `SideNav` to use the rail variant.
|
||||
|
||||
<FileSource src="/framed/UIShell/HeaderNavRail" />
|
||||
|
||||
### Header with app switcher
|
||||
|
||||
The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.
|
||||
|
|
|
|||
65
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
Normal file
65
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<script>
|
||||
import {
|
||||
Header,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
SideNav,
|
||||
SideNavItems,
|
||||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SideNavDivider,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
} from "carbon-components-svelte";
|
||||
import Fade16 from "carbon-icons-svelte/lib/Fade16";
|
||||
|
||||
let isSideNavOpen = false;
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
|
||||
<div slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
<HeaderNav>
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
<HeaderNavItem href="/" text="Link 3" />
|
||||
<HeaderNavMenu text="Menu">
|
||||
<HeaderNavItem href="/" text="Link 1" />
|
||||
<HeaderNavItem href="/" text="Link 2" />
|
||||
<HeaderNavItem href="/" text="Link 3" />
|
||||
</HeaderNavMenu>
|
||||
<HeaderNavItem href="/" text="Link 4" />
|
||||
</HeaderNav>
|
||||
</Header>
|
||||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}" rail>
|
||||
<SideNavItems>
|
||||
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
|
||||
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
|
||||
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
|
||||
<SideNavMenu icon="{Fade16}" text="Menu">
|
||||
<SideNavMenuItem href="/" text="Link 1" />
|
||||
<SideNavMenuItem href="/" text="Link 2" />
|
||||
<SideNavMenuItem href="/" text="Link 3" />
|
||||
</SideNavMenu>
|
||||
<SideNavDivider />
|
||||
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
|
||||
<Content>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column>
|
||||
<h1>Welcome</h1>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Content>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<Column xlg="{5}" lg="{8}" md="{4}">
|
||||
<TileCard
|
||||
title="Carbon Charts Svelte"
|
||||
subtitle="17 chart types, powered by d3"
|
||||
subtitle="20 chart types, powered by d3"
|
||||
target="_blank"
|
||||
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
|
|||
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
|
||||
|
||||
carbon-components-svelte@../:
|
||||
version "0.34.0"
|
||||
version "0.35.0"
|
||||
dependencies:
|
||||
carbon-icons-svelte "^10.27.0"
|
||||
clipboard-copy "3.2.0"
|
||||
flatpickr "4.6.9"
|
||||
|
||||
carbon-components@10.35.0:
|
||||
version "10.35.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
|
||||
integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
|
||||
carbon-components@10.36.0:
|
||||
version "10.36.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.36.0.tgz#ce523b19df3a404e379113dafbbe0219bb22b17f"
|
||||
integrity sha512-k+UR+Whz/qXbev2RT9JjV+QbkSKcHrLNF25bEpr3KZHmpCGhwGz5mVyv0ohZ4B6rKkpuvlgYfLsANL0yQX77zA==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue