mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
feat!: initial pre-release - Carbon v11 styles (#1881)
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**
Breaking changes
- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.
Components
- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme
CSS
- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists
General
- Codebase uses npm instead of yarn
--- Commit notes
* chore: depend on @carbon/styles instead of carbon-components
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
* chore: use v11 styles for docs
* chore: stick to `bx` instead of `cds` class prefix
* chore: migrate layout spacing to v11
See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:
$layout-01 Removed, use $spacing-05 instead
$layout-02 Removed, use $spacing-06 instead
$layout-03 Removed, use $spacing-07 instead
$layout-04 Removed, use $spacing-09 instead
$layout-05 Removed, use $spacing-10 instead
$layout-06 Removed, use $spacing-12 instead
$layout-07 Removed, use $spacing-13 instead
* chore: migrate type tokens to v11
See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens
* chore: keep flex-grid instead of css grid for the moment
Upgrading to css-grid should be separate.
* chore: v11 Tabs
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
* chore: use @ibm/plex fonts
* chore: v11 Button
* dependency: @carbon/styles update
* chore: v11 ComboBox
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 ContentSwitcher
For better compatibility with existing code bases size `xl` is still supported.
* chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
* chore: v11 DatePicker
For better compatibility with existing codebases size xl is still supported.
* chore: v11 Dropdown
For better compatibility with existing codebases size xl is still supported.
* chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
* chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
* chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
* chore: v11 MultiSelect
Size `xl` changed to `lg`.
* chore: v11 NumberInput
For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 OverflowMenu
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 PasswordInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 Search
* chore: v11 Select
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 AspectRatio
The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.
* chore: v11 TextArea
`cols` no longer has a defaults to 50 but remains at 100% width by default.
* chore: v11 TextInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TreeView
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
* chore: remove Truncate since it does not exist in Carbon v11
* chore: v11 UIShell
* chore: v11 Accordion
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* tmp: v11 PopoverContent
* Revert "chore: remove Truncate since it does not exist in Carbon v11"
This reverts commit 5833536199.
* chore: use truncate mixins
* docs: add truncate mixins
* chore: use `cds` class prefix in v11 styles
* build: switch to npm
* chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
* chore: add individual theme css
* feat: migrate Theme component to v11
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
* chore: use bx css prefixes for now
* chore: resolve peerDependencies
- Leaving out latest prettier for now
- Ignoring Sveld warnings for now
* chore: fix type errors and tests
---------
Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
This commit is contained in:
Enrico Sacchetti
Eric Liu
parent
b3a4590872
commit
4dabb827ee
186 changed files with 7886 additions and 5628 deletions
|
|
@ -110,7 +110,7 @@
|
|||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Accordion size="xl">
|
||||
<Accordion size="lg">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>
|
||||
Natural Language Classifier uses advanced natural language processing and
|
||||
|
|
@ -214,6 +214,6 @@
|
|||
|
||||
<Accordion skeleton open="{false}" />
|
||||
|
||||
<Accordion skeleton size="xl" />
|
||||
<Accordion skeleton size="lg" />
|
||||
|
||||
<Accordion skeleton size="sm" />
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
<Row>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
<Button kind="danger">Danger button</Button>
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
<Button icon="{Add}">With icon</Button>
|
||||
|
||||
|
|
@ -32,30 +32,30 @@
|
|||
<p {...props}>Custom element</p>
|
||||
</Button>
|
||||
|
||||
<Button size="field">Primary</Button>
|
||||
<Button size="md">Primary</Button>
|
||||
|
||||
<Button size="field" kind="secondary">Secondary</Button>
|
||||
<Button size="md" kind="secondary">Secondary</Button>
|
||||
|
||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||
<Button size="md" kind="tertiary">Tertiary</Button>
|
||||
|
||||
<Button size="field" kind="ghost">Ghost</Button>
|
||||
<Button size="md" kind="ghost">Ghost</Button>
|
||||
|
||||
<Button size="field" kind="danger">Danger</Button>
|
||||
<Button size="md" kind="danger">Danger</Button>
|
||||
|
||||
<Button size="small">Primary</Button>
|
||||
<Button size="sm">Primary</Button>
|
||||
|
||||
<Button size="small" kind="secondary">Secondary</Button>
|
||||
<Button size="sm" kind="secondary">Secondary</Button>
|
||||
|
||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||
<Button size="sm" kind="tertiary">Tertiary</Button>
|
||||
|
||||
<Button size="small" kind="ghost">Ghost</Button>
|
||||
<Button size="sm" kind="ghost">Ghost</Button>
|
||||
|
||||
<Button size="small" kind="danger">Danger</Button>
|
||||
<Button size="sm" kind="danger">Danger</Button>
|
||||
|
||||
<Button disabled>Disabled button</Button>
|
||||
|
||||
<Button skeleton />
|
||||
|
||||
<Button skeleton size="field" />
|
||||
<Button skeleton size="md" />
|
||||
|
||||
<Button skeleton size="small" />
|
||||
<Button skeleton size="sm" />
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
size="xl"
|
||||
size="lg"
|
||||
items="{items}"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid condensed>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
|
||||
</script>
|
||||
|
||||
<ContentSwitcher size="xl" selectedIndex="{1}">
|
||||
<ContentSwitcher size="lg" selectedIndex="{1}">
|
||||
<Switch disabled text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
<Switch>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
<DatePicker>
|
||||
<DatePickerInput
|
||||
size="xl"
|
||||
size="lg"
|
||||
labelText="Date of birth"
|
||||
placeholder="mm/dd/yyyy"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
/>
|
||||
|
||||
<Dropdown
|
||||
size="xl"
|
||||
size="lg"
|
||||
titleText="Contact"
|
||||
selectedId="0"
|
||||
items="{[
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@
|
|||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
||||
<ExpandableTile
|
||||
light
|
||||
tileExpandedLabel="View less"
|
||||
tileCollapsedLabel="View more"
|
||||
>
|
||||
<ExpandableTile light>
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
/>
|
||||
|
||||
<FileUploader
|
||||
kind="danger-ghost"
|
||||
kind="danger--ghost"
|
||||
size="lg"
|
||||
bind:this="{fileUploader}"
|
||||
multiple
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
labelDescription="Only JPEG files are accepted."
|
||||
accept="{['.jpg', '.jpeg']}"
|
||||
status="complete"
|
||||
bind:files
|
||||
bind:files="{files}"
|
||||
on:add="{(e) => {
|
||||
console.log(e.detail); // File[]
|
||||
}}"
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid fullWidth>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
/>
|
||||
|
||||
<MultiSelect
|
||||
size="xl"
|
||||
size="lg"
|
||||
titleText="Contact"
|
||||
label="Select contact methods..."
|
||||
items="{[
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid narrow>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
<Row>
|
||||
<Column
|
||||
sm="{{ span: 1, offset: 3 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
Offset 3
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 2, offset: 2 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
Offset 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 3, offset: 1 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
Offset 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 4, offset: 0 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
Offset 0
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
<OverflowMenu size="xl">
|
||||
<OverflowMenu size="lg">
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
<OverflowMenuItem
|
||||
href="https://cloud.ibm.com/docs/api-gateway/"
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@
|
|||
|
||||
<Grid padding>
|
||||
<Row padding>
|
||||
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
|
||||
<Column padding style="outline: 1px solid var(--bx-interactive-04)">
|
||||
Column
|
||||
</Column>
|
||||
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
|
||||
<Column padding style="outline: 1px solid var(--bx-interactive-04)">
|
||||
Column
|
||||
</Column>
|
||||
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
|
||||
<Column padding style="outline: 1px solid var(--bx-interactive-04)">
|
||||
Column
|
||||
</Column>
|
||||
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
|
||||
<Column padding style="outline: 1px solid var(--bx-interactive-04)">
|
||||
Column
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<PasswordInput light labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
|
||||
<PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Popover } from "../types";
|
||||
import { Popover, PopoverContent } from "../types";
|
||||
|
||||
let open = false;
|
||||
</script>
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
console.log('on:click:outside');
|
||||
}}"
|
||||
>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
sm="{1}"
|
||||
md="{4}"
|
||||
lg="{8}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 4, lg: 8
|
||||
</Column>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
sm="{1}"
|
||||
md="{2}"
|
||||
lg="{2}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 2, lg: 2
|
||||
</Column>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
style="outline: 1px solid var(--bx-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
<Select size="xl" labelText="Carbon theme" selected="g10">
|
||||
<Select size="lg" labelText="Carbon theme" selected="g10">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<TabContent>Content 3</TabContent>
|
||||
|
||||
<Tabs type="container">
|
||||
<Tabs contained>
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { Toggle, ToggleSkeleton } from "../types";
|
||||
import { Toggle } from "../types";
|
||||
</script>
|
||||
|
||||
<Toggle labelText="Push notifications" hideLabel />
|
||||
|
|
@ -15,5 +15,3 @@
|
|||
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
<Toggle labelText="Push notifications" disabled />
|
||||
|
||||
<ToggleSkeleton />
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
<div class="bx--tooltip__footer">
|
||||
<Link href="/">Learn more</Link>
|
||||
<Button size="small">Manage</Button>
|
||||
<Button size="sm">Manage</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Link href="/">Learn more</Link>
|
||||
|
||||
<Button size="small">Manage</Button>
|
||||
<Button size="sm">Manage</Button>
|
||||
|
||||
<Tooltip triggerText="Resource list" icon="{Catalog}">
|
||||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
size="compact"
|
||||
size="xs"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue