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

docs: add new component docs

Browse source
This commit is contained in:
Eric Liu 2020-10-02 20:13:02 -07:00
commit 2008d0035f
130 changed files with 6662 additions and 3801 deletions
Download patch file Download diff file Expand all files Collapse all files

20
docs/src/pages/framed/Grid/AspectRatioColumns.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid>
<Row>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
</Row>
</Grid>

12
docs/src/pages/framed/Grid/CondensedGrid.svelte Normal file
View file

@ -0,0 +1,12 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid condensed>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

12
docs/src/pages/framed/Grid/FullWidthGrid.svelte Normal file
View file

@ -0,0 +1,12 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid fullWidth>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

12
docs/src/pages/framed/Grid/Grid.svelte Normal file
View file

@ -0,0 +1,12 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

12
docs/src/pages/framed/Grid/NarrowGrid.svelte Normal file
View file

@ -0,0 +1,12 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid narrow>
<Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
</Row>
</Grid>

32
docs/src/pages/framed/Grid/OffsetColumns.svelte Normal file
View file

@ -0,0 +1,32 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid>
<Row>
<Column
sm="{{ span: 1, offset: 3 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 3
</Column>
<Column
sm="{{ span: 2, offset: 2 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 2
</Column>
<Column
sm="{{ span: 3, offset: 1 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 1
</Column>
<Column
sm="{{ span: 4, offset: 0 }}"
style="outline: 1px solid var(--cds-interactive-04)"
>
Offset 0
</Column>
</Row>
</Grid>

40
docs/src/pages/framed/Grid/ResponsiveGrid.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid>
<Row>
<Column
sm="{1}"
md="{4}"
lg="{8}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 4, lg: 8
</Column>
<Column
sm="{1}"
md="{2}"
lg="{2}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 2, lg: 2
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
<Column
sm="{1}"
md="{1}"
lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)"
>
sm: 1, md: 1, lg: 1
</Column>
</Row>
</Grid>