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 ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the content switcher |
### Slots ### Slots

2
docs/src/COMPONENT_API.json
View file

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

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

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

4
src/ContentSwitcher/ContentSwitcher.svelte
View file

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

2
tests/ContentSwitcher.test.svelte
View file

@ -3,7 +3,7 @@
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte"; import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
</script> </script>
<ContentSwitcher size="xl" selectedIndex="{1}"> <ContentSwitcher size="lg" selectedIndex="{1}">
<Switch disabled text="Latest news" /> <Switch disabled text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
<Switch> <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 * Specify the size of the content switcher
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
[key: `data-${string}`]: any; [key: `data-${string}`]: any;
} }