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

refactor(content-switcher): use class name directive

Browse source
This commit is contained in:
Eric Liu 2020-12-05 15:15:12 -08:00
commit 3d5eed849c
5 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -3320,13 +3320,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected | | selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) | | text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the "text" slot (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots ### Slots

2
docs/src/COMPONENT_API.json
View file

@ -911,7 +911,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)", "description": "Specify the switch text\nAlternatively, use the \"text\" slot (e.g., <span slot=\"text\">...</span>)",
"type": "string", "type": "string",
"value": "\"Provide text\"", "value": "\"Provide text\"",
"isFunction": false, "isFunction": false,

3
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -64,8 +64,9 @@
role="tablist" role="tablist"
class:bx--content-switcher="{true}" class:bx--content-switcher="{true}"
class:bx--content-switcher--light="{light}" class:bx--content-switcher--light="{light}"
class:bx--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

2
src/ContentSwitcher/Switch.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the switch text * Specify the switch text
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) * Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
*/ */
export let text = "Provide text"; export let text = "Provide text";

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

@ -3,7 +3,7 @@
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Specify the switch text * Specify the switch text
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) * Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
* @default "Provide text" * @default "Provide text"
*/ */
text?: string; text?: string;