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

breaking(breakpoint): add breakpointObserver store (#1092)

Browse source 
* breaking: re-name event "on:match" to "on:change" in `Breakpoint.svelte`

* feat: add `breakpointObserver` read-only store

* refactor: export breakpoint constants from `breakpoints.js`
This commit is contained in:
brunnerh 2022-03-08 17:38:58 +01:00 • committed by GitHub
commit 5de0d9a357
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 180 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,14 @@ This utility component uses the [Window.matchMedia API](https://developer.mozill
Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
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" />
<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" />