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

docs: update Theme, DataTable docs (#1305)

Browse source 
* docs(theme): add note that `Theme` must be used with `all.css`

* docs(data-table): add note that custom widths do not work with `stickyHeader`
This commit is contained in:
metonym 2022-05-17 06:24:23 -07:00 • committed by GitHub
commit e1451324cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -334,6 +334,10 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
</InlineNotification>
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
### Sticky header

14
docs/src/pages/components/Theme.svx
View file

@ -1,9 +1,19 @@
<script>
import { Theme } from "carbon-components-svelte";
import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `import "carbon-components-svelte/css/all.css";`;
</script>
This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
</InlineNotification>
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
<CodeSnippet svx-ignore {code} />
### Default