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

docs(breakpoint): label on:match event [ci skip]

Browse source
This commit is contained in:
Eric Y Liu 2021-07-07 12:33:56 -07:00
commit 8e1f52e7d4
2 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,11 +9,11 @@
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> (`sm`): less than 672px</ListItem>
<ListItem><strong>Medium</strong> (`md`): 672 - 1056px</ListItem>
<ListItem><strong>Large</strong> (`lg`): 1056 - 1312px</ListItem>
<ListItem><strong>X-Large</strong> (`xlg`): 1312 - 1584px</ListItem>
<ListItem><strong>Max</strong> (`max`): greater than 1584px</ListItem>
<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.

7
docs/src/pages/framed/Breakpoint/Breakpoint.svelte
View file

@ -8,9 +8,10 @@
<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
<p>Resize the width of your browser.</p>
<h6>Current breakpoint size</h6>
<h6>Breakpoint size</h6>
<h1>{size}</h1>
<h6>on:match</h6>
<pre>
{JSON.stringify(events,null, 2)}
</pre>
@ -20,4 +21,8 @@
h1 {
margin-bottom: var(--cds-spacing-08);
}
h6 {
margin-bottom: var(--cds-spacing-03);
}
</style>