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

Breakpoint (#733)

Browse source 
* feat(breakpoint): add Breakpoint

* docs(breakpoint): update docs

* refactor(breakpoint): add prop descriptions, type slot

* docs: add missing semicolon to last typedef

* docs: decrease margin bottom for inline snippet

* docs: add Breakpoint to new components [ci skip]

* docs(config): use "scripts-markup-styles" for svelteSortOrder [ci skip]

* docs(breakpoint): label on:match event [ci skip]
This commit is contained in:
Eric Liu 2021-07-07 12:40:06 -07:00 • committed by GitHub
commit f31ab25e0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 308 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 170 components exported from carbon-components-svelte@0.39.0.
> 171 components exported from carbon-components-svelte@0.39.0.
## Components
@ -11,6 +11,7 @@
- [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton)
- [`Breakpoint`](#breakpoint)
- [`Button`](#button)
- [`ButtonSet`](#buttonset)
- [`ButtonSkeleton`](#buttonskeleton)
@ -344,6 +345,36 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Breakpoint`
### Types
```ts
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | -- | Determine the current Carbon grid breakpoint size |
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | Reference the Carbon grid breakpoints |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } </code> | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------------------------------- |
| match | dispatched | <code>{ size: BreakpointSize; breakpointValue: BreakpointValue; }</code> |
## `Button`
### Props