mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
35 lines
1.7 KiB
Text
35 lines
1.7 KiB
Text
|
|
<script>
|
|
import {
|
|
Breakpoint, UnorderedList, ListItem
|
|
} from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
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)">
|
|
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
|
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
|
|
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
|
|
<ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
|
|
<ListItem><strong>Max</strong>: greater than 1584px</ListItem>
|
|
</UnorderedList>
|
|
|
|
This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
|
|
|
|
## Default
|
|
|
|
Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
|
|
|
|
The `"on:change"` event will fire when the size is initially determined and when a breakpoint change event occurs (e.g., the browser width is resized).
|
|
|
|
<FileSource src="/framed/Breakpoint/Breakpoint" />
|
|
|
|
## 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.
|
|
|
|
There also exists a `breakpoints` dictionary mapping from `BreakpointSize` to `BreakpointValue`.
|
|
|
|
<FileSource src="/framed/Breakpoint/BreakpointObserver" />
|