mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Alignment with Carbon version 10.32 (#588)
* feat(code-snippet): add copy functionality - docs: add custom feedback copy text example * feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 * build(rollup): add clipboard-copy to globals * feat(copy-button): add copy functionality * feat(content-switcher): deprecate the light prop - docs: remove the light variant example * fix(toolbar-search): remove outer div * feat(search): add searchClass prop * fix(composed-modal): set hasScrollingContent class on ModalBody * docs(data-table): add expandable size examples * feat(tooltip): add TooltipFooter component * fix(time-picker): correctly display invalidText * feat(breadcrumb): support overflow menu * feat(multi-select): export inputRef prop * chore(deps-dev): upgrade carbon-components to v10.32.0 * feat(form): add noMargin prop to FormGroup * docs(tooltip): document TooltipFooter * feat(context-menu): support danger kind for ContextMenuOption * feat(data-table): support rendering empty table header in skeleton * refactor(types): use shorter import path in DataTableSkeleton * feat(data-table): allow sorting to be disabled for a specific header * docs(data-table): update example to desort the Protocol header As an example, it makes more sense because all the values ("http") are the same. * fix(context-menu): set initial y offset of context menu based on window height #577 * fix(context-menu): render submenu based on viewport constraints #577
This commit is contained in:
Eric Liu
GitHub
parent
f13e3b100e
commit
fa9b90cd79
61 changed files with 825 additions and 233 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 166,
|
||||
"total": 167,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -805,7 +805,7 @@
|
|||
{
|
||||
"name": "code",
|
||||
"kind": "let",
|
||||
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
|
||||
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -989,7 +989,12 @@
|
|||
"name": "mouseleave",
|
||||
"element": "CodeSnippetSkeleton"
|
||||
},
|
||||
{ "type": "forwarded", "name": "animationend", "element": "CopyButton" }
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "animationend",
|
||||
"element": "CopyButton"
|
||||
},
|
||||
{ "type": "dispatched", "name": "copy" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
|
||||
|
|
@ -1651,6 +1656,16 @@
|
|||
"moduleName": "ContextMenuOption",
|
||||
"filePath": "src/ContextMenu/ContextMenuOption.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "kind",
|
||||
"kind": "let",
|
||||
"description": "Specify the kind of option",
|
||||
"type": "\"default\" | \"danger\"",
|
||||
"value": "\"default\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
|
|
@ -1857,12 +1872,22 @@
|
|||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"kind": "let",
|
||||
"description": "Specify the text to copy",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "Copy" },
|
||||
{ "type": "forwarded", "name": "animationend", "element": "Copy" }
|
||||
{ "type": "forwarded", "name": "animationend", "element": "Copy" },
|
||||
{ "type": "dispatched", "name": "copy" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "InlineComponent", "name": "Copy" },
|
||||
|
|
@ -2056,7 +2081,7 @@
|
|||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:header",
|
||||
"detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
|
||||
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
|
||||
},
|
||||
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
|
||||
{
|
||||
|
|
@ -2092,14 +2117,14 @@
|
|||
"ts": "type DataTableValue = any"
|
||||
},
|
||||
{
|
||||
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
|
||||
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
|
||||
"name": "DataTableEmptyHeader",
|
||||
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
|
||||
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
|
||||
},
|
||||
{
|
||||
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
|
||||
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
|
||||
"name": "DataTableNonEmptyHeader",
|
||||
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
|
||||
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
|
||||
},
|
||||
{
|
||||
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
|
||||
|
|
@ -2207,10 +2232,7 @@
|
|||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" },
|
||||
"extends": {
|
||||
"interface": "DataTableHeader",
|
||||
"import": "\"../DataTable/DataTable\""
|
||||
}
|
||||
"extends": { "interface": "DataTableHeader", "import": "\"./DataTable\"" }
|
||||
},
|
||||
{
|
||||
"moduleName": "DatePicker",
|
||||
|
|
@ -3499,6 +3521,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "noMargin",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for to remove the bottom margin",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "messageText",
|
||||
"kind": "let",
|
||||
|
|
@ -5766,6 +5798,16 @@
|
|||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "inputRef",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the input HTML element",
|
||||
"type": "null | HTMLInputElement",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
|
|
@ -6354,7 +6396,7 @@
|
|||
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "iconClass",
|
||||
|
|
@ -7518,6 +7560,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the tile",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"kind": "let",
|
||||
|
|
@ -7690,6 +7742,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "searchClass",
|
||||
"kind": "let",
|
||||
"description": "Specify the class name passed to the outer div element",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "skeleton",
|
||||
"kind": "let",
|
||||
|
|
@ -8171,6 +8233,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the tile",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
|
|
@ -9369,6 +9441,16 @@
|
|||
"moduleName": "TableHeader",
|
||||
"filePath": "src/DataTable/TableHeader.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "disableSorting",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable sorting on this specific cell",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "scope",
|
||||
"kind": "let",
|
||||
|
|
@ -11157,6 +11239,25 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "TooltipFooter",
|
||||
"filePath": "src/Tooltip/TooltipFooter.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "selectorPrimaryFocus",
|
||||
"kind": "let",
|
||||
"description": "Specify a selector to be focused inside the footer when opening the tooltip",
|
||||
"type": "string",
|
||||
"value": "\"a[href], button:not([disabled])\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "TooltipIcon",
|
||||
"filePath": "src/TooltipIcon/TooltipIcon.svelte",
|
||||
|
|
|
|||
|
|
@ -2,17 +2,10 @@
|
|||
export let code = "";
|
||||
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import copy from "clipboard-copy";
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<CodeSnippet
|
||||
code="{code}"
|
||||
type="inline"
|
||||
on:click="{() => {
|
||||
copy(code);
|
||||
}}"
|
||||
/>
|
||||
<CodeSnippet code="{code}" type="inline" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { CodeSnippet, Button } from "carbon-components-svelte";
|
||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||
import copy from "clipboard-copy";
|
||||
import { url } from "@sveltech/routify";
|
||||
import { theme } from "../store";
|
||||
|
||||
|
|
@ -41,7 +40,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
<div class="code-override">
|
||||
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
|
||||
<CodeSnippet type="multi" code="{codeRaw}">
|
||||
{@html code}
|
||||
</CodeSnippet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,11 @@
|
|||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
<Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
|
||||
<Tag
|
||||
size="sm"
|
||||
type="red"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
Deprecated
|
||||
</Tag>
|
||||
{/if}
|
||||
|
|
@ -113,7 +117,7 @@
|
|||
<Tag
|
||||
size="sm"
|
||||
type="green"
|
||||
style="margin-top: 0; margin-bottom: 0"
|
||||
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
|
||||
>
|
||||
New
|
||||
</Tag>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
|
|||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
OverflowMenu,
|
||||
OverflowMenuItem
|
||||
} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
|
@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
|
|||
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### Overflow menu
|
||||
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
|
||||
<BreadcrumbItem>
|
||||
<OverflowMenu>
|
||||
<OverflowMenuItem href="/api/data" text="Data" />
|
||||
<OverflowMenuItem href="/api/data/latest" text="Latest" />
|
||||
</OverflowMenu>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Breadcrumb noTrailingSlash skeleton count={3} />
|
||||
|
|
@ -28,21 +28,27 @@ let comment = `
|
|||
</script>
|
||||
|
||||
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
|
||||
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default (single-line)
|
||||
|
||||
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
|
||||
<CodeSnippet code="yarn add -D carbon-components-svelte" />
|
||||
|
||||
### Inline
|
||||
|
||||
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
|
||||
<CodeSnippet type="inline" code="rm -rf node_modules/" />
|
||||
|
||||
### Multi-line
|
||||
|
||||
<CodeSnippet type="multi" {code} />
|
||||
|
||||
### Custom copy feedback text
|
||||
|
||||
Use the `feedback` prop to override the default copy button feedback text.
|
||||
|
||||
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
||||
|
||||
### Hidden copy button
|
||||
|
||||
<CodeSnippet type="multi" {code} hideCopyButton />
|
||||
|
|
@ -51,7 +57,7 @@ let comment = `
|
|||
|
||||
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
||||
|
||||
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
|
||||
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
|
||||
<br />
|
||||
<CodeSnippet disabled type="multi" code="{comment}" />
|
||||
|
||||
|
|
|
|||
|
|
@ -28,13 +28,6 @@ components: ["ContentSwitcher", "Switch"]
|
|||
|
||||
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<ContentSwitcher light>
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
</ContentSwitcher>
|
||||
|
||||
### Custom switch slot
|
||||
|
||||
<ContentSwitcher>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
</script>
|
||||
|
||||
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
|
||||
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<CopyButton on:click />
|
||||
<CopyButton text="Carbon svelte" />
|
||||
|
||||
### Custom feedback
|
||||
### Custom feedback text
|
||||
|
||||
<CopyButton on:click feedback="Copied to clipboard" />
|
||||
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
||||
|
|
@ -550,10 +550,16 @@ The slot name for the table header cells is `"cell-header"`.
|
|||
|
||||
### Sortable
|
||||
|
||||
Set `sortable` to `true` to enable table column sorting.
|
||||
|
||||
To disable sorting on a specific column, set `sort` to `false` in the header object passed to the `headers` prop.
|
||||
|
||||
In the example below, the "Protocol" column is not sortable.
|
||||
|
||||
<DataTable sortable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "protocol", value: "Protocol", sort: false },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
|
|
@ -757,6 +763,189 @@ In the following example, each row in the sortable data table has an overflow me
|
|||
</div>
|
||||
</DataTable>
|
||||
|
||||
### Expandable (compact size)
|
||||
|
||||
<DataTable size="compact" expandable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</DataTable>
|
||||
|
||||
### Expandable (short size)
|
||||
|
||||
<DataTable size="short" expandable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</DataTable>
|
||||
|
||||
### Expandable (tall size)
|
||||
|
||||
<DataTable size="tall" expandable
|
||||
headers="{[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" }
|
||||
]}"
|
||||
rows="{[
|
||||
{
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
{
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: "Round robin"
|
||||
},
|
||||
{
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: "DNS delegation"
|
||||
},
|
||||
]}"
|
||||
>
|
||||
<div slot="expanded-row" let:row>
|
||||
<pre>
|
||||
{JSON.stringify(row, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</DataTable>
|
||||
|
||||
### Batch expansion
|
||||
|
||||
<DataTable batchExpansion
|
||||
|
|
@ -832,6 +1021,12 @@ In the following example, each row in the sortable data table has an overflow me
|
|||
|
||||
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
|
||||
|
||||
### Skeleton with empty header
|
||||
|
||||
Pass an object with `"empty"` set to `true` to render an empty table header column.
|
||||
|
||||
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
|
||||
|
||||
### Skeleton without header, toolbar
|
||||
|
||||
<DataTableSkeleton showHeader={false} showToolbar={false} />
|
||||
|
|
|
|||
|
|
@ -33,4 +33,18 @@ components: ["TileGroup", "RadioTile"]
|
|||
<RadioTile light value="2">
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
|
||||
### Disabled state
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
<RadioTile value="0" checked>
|
||||
Lite plan
|
||||
</RadioTile>
|
||||
<RadioTile value="1" disabled>
|
||||
Standard plan
|
||||
</RadioTile>
|
||||
<RadioTile value="2" disabled>
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
|
|
@ -33,4 +33,18 @@ components: ["SelectableTile"]
|
|||
<SelectableTile light>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
|
||||
### Disabled state
|
||||
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile selected>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile disabled>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
<SelectableTile disabled>
|
||||
Multi-select Tile
|
||||
</SelectableTile>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,21 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
|||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
### Disabled
|
||||
### Invalid state
|
||||
|
||||
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="PM">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
</TimePickerSelect>
|
||||
<TimePickerSelect value="PDT">
|
||||
<SelectItem value="pdt" text="PDT" />
|
||||
<SelectItem value="gmt" text="GMT" />
|
||||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
|
||||
### Disabled state
|
||||
|
||||
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
||||
<TimePickerSelect value="PM" disabled>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
---
|
||||
components: ["Tooltip", "TooltipFooter"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Tooltip, Link, Button } from "carbon-components-svelte";
|
||||
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
|
||||
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
|
@ -45,10 +49,10 @@ By default, the tooltip is triggered by an information icon.
|
|||
<p>
|
||||
Resources are provisioned based on your account's organization.
|
||||
</p>
|
||||
<div class="bx--tooltip__footer">
|
||||
<TooltipFooter selectorPrimaryFocus="#d">
|
||||
<Link href="/">Learn more</Link>
|
||||
<Button size="small">Manage</Button>
|
||||
</div>
|
||||
<Button id="d" size="small">Manage</Button>
|
||||
</TooltipFooter>
|
||||
</Tooltip>
|
||||
|
||||
### Custom icon (component)
|
||||
|
|
|
|||
|
|
@ -42,4 +42,6 @@
|
|||
<ContextMenuOption id="1" labelText="Reduce noise" />
|
||||
<ContextMenuOption id="2" labelText="Auto-sharpen" />
|
||||
</ContextMenuGroup>
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuOption indented kind="danger" labelText="Delete" />
|
||||
</ContextMenu>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let code = "yarn add -D carbon-component-svelte";
|
||||
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
import copy from "clipboard-copy";
|
||||
</script>
|
||||
|
||||
<CodeSnippet on:click="{() => copy(code)}" code="{code}" />
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
} from "carbon-components-svelte";
|
||||
import TileCard from "../components/TileCard.svelte";
|
||||
import { metatags } from "@sveltech/routify";
|
||||
import copy from "clipboard-copy";
|
||||
|
||||
metatags.title = "Carbon Components Svelte";
|
||||
metatags.description =
|
||||
|
|
@ -53,21 +52,9 @@
|
|||
<Column>
|
||||
<h3>Install</h3>
|
||||
<h4>Installing with yarn:</h4>
|
||||
<CodeSnippet
|
||||
code="{installYarn}"
|
||||
on:click="{() => {
|
||||
copy(installYarn);
|
||||
}}"
|
||||
/>
|
||||
|
||||
<CodeSnippet code="{installYarn}" />
|
||||
<h4>Using npm:</h4>
|
||||
|
||||
<CodeSnippet
|
||||
code="{installNpm}"
|
||||
on:click="{() => {
|
||||
copy(installNpm);
|
||||
}}"
|
||||
/>
|
||||
<CodeSnippet code="{installNpm}" />
|
||||
</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
layout: recipe
|
||||
---
|
||||
|
||||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
|
||||
|
||||
You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
|
||||
|
||||
## clipboard-copy
|
||||
|
||||
This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
|
||||
|
||||
<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue