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

docs(breakpoint): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 14:50:41 -07:00
commit 4eaef2d5e7
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/src/pages/components/Breakpoint.svx
View file

@ -1,12 +1,12 @@
<script> <script>
import { import {
Breakpoint, UnorderedList, ListItem UnorderedList, ListItem
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints: The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem> <ListItem><strong>Small</strong>: less than 672px</ListItem>
@ -28,8 +28,8 @@ The `"on:change"` event will fire when the size is initially determined and when
## Store and Breakpoint Values ## Store and Breakpoint Values
As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint. Use `breakpointObserver` as an alternative to the component to get the current size as a Svelte store. The store provides two additional functions that create derived stores returning a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
There also exists a `breakpoints` dictionary mapping from `BreakpointSize` to `BreakpointValue`. Access the `breakpoints` dictionary to map from `BreakpointSize` to `BreakpointValue`.
<FileSource src="/framed/Breakpoint/BreakpointObserver" /> <FileSource src="/framed/Breakpoint/BreakpointObserver" />