mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 19:01:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 ContentSwitcher

Browse source 
For better compatibility with existing code bases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-27 14:40:54 +02:00 • committed by Enrico Sacchetti
commit ee32859ba2
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -756,10 +756,10 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- |
| selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the content switcher |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | ----------------------------------------- |
| selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the content switcher |
### Slots

2
docs/src/COMPONENT_API.json
View file

@ -1935,7 +1935,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the content switcher",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

4
docs/src/pages/components/ContentSwitcher.svx
View file

@ -43,9 +43,9 @@ components: ["ContentSwitcher", "Switch"]
</Switch>
</ContentSwitcher>
## Extra-large size
## Large size
<ContentSwitcher size="xl">
<ContentSwitcher size="lg">
<Switch text="All" />
<Switch text="Archived" />
</ContentSwitcher>

4
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -8,7 +8,7 @@
/**
* Specify the size of the content switcher
* @type {"sm" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;
@ -63,7 +63,7 @@
role="tablist"
class:bx--content-switcher="{true}"
class:bx--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--xl="{size === 'xl'}"
class:bx--content-switcher--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

2
tests/ContentSwitcher.test.svelte
View file

@ -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>

2
types/ContentSwitcher/ContentSwitcher.svelte.d.ts vendored
View file

@ -14,7 +14,7 @@ export interface ContentSwitcherProps extends RestProps {
* Specify the size of the content switcher
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
[key: `data-${string}`]: any;
}