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

docs(grid): touch up grid examples

Browse source
This commit is contained in:
Eric Liu 2022-04-02 10:46:00 -07:00
commit 1d667b63b7
10 changed files with 66 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/framed/Grid/AspectRatioColumns.svelte
View file

@ -4,17 +4,7 @@
<Grid> <Grid>
<Row> <Row>
<Column <Column aspectRatio="2x1">2x1</Column>
aspectRatio="2x1" <Column aspectRatio="2x1">2x1</Column>
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
<Column
aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)"
>
2x1
</Column>
</Row> </Row>
</Grid> </Grid>

8
docs/src/pages/framed/Grid/CondensedGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid condensed> <Grid condensed>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
</Grid> </Grid>

8
docs/src/pages/framed/Grid/FullWidthGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid fullWidth> <Grid fullWidth>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
</Grid> </Grid>

8
docs/src/pages/framed/Grid/Grid.svelte
View file

@ -4,9 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
</Grid> </Grid>

8
docs/src/pages/framed/Grid/NarrowGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid narrow> <Grid narrow>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
</Grid> </Grid>

28
docs/src/pages/framed/Grid/OffsetColumns.svelte
View file

@ -4,29 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column <Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
sm="{{ span: 1, offset: 3 }}" <Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
style="outline: 1px solid var(--cds-interactive-04)" <Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
> <Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
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> </Row>
</Grid> </Grid>

52
docs/src/pages/framed/Grid/PaddedGrid.svelte
View file

@ -2,28 +2,48 @@
import { Grid, Row, Column } from "carbon-components-svelte"; import { Grid, Row, Column } from "carbon-components-svelte";
</script> </script>
<Grid narrow padding> <div>Adding padding to Grid applies it to all child columns:</div>
<Grid padding>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
</Grid> </Grid>
<Grid narrow> <div>Adding padding to a Row only applies its child columns:</div>
<Grid>
<Row padding> <Row padding>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>Column</Column>
</Row> </Row>
<Row> <Row>
<Column padding style="outline: 1px solid var(--cds-interactive-04)"> <Column>Column</Column>
Column <Column>Column</Column>
</Column> <Column>Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column>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> </Row>
</Grid> </Grid>
<div>Adding padding to a specific column only applies it to the column:</div>
<Grid>
<Row>
<Column padding>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
<Column>Column</Column>
</Row>
</Grid>
<style>
div {
margin-top: var(--cds-spacing-05);
padding: var(--cds-spacing-05);
}
</style>

36
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
View file

@ -4,37 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column <Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
sm="{1}" <Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
md="{4}" <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
lg="{8}" <Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
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> </Row>
</Grid> </Grid>

4
docs/src/pages/framed/_reset.svelte
View file

@ -21,4 +21,8 @@
width: 100%; width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--cds-spacing-06) var(--cds-spacing-05);
} }
:global(.framed [class^="bx--col"]) {
outline: 1px solid var(--cds-interactive-04);
}
</style> </style>

28
tests/AspectRatio.test.svelte
View file

@ -2,34 +2,6 @@
import { AspectRatio, Tile } from "../types"; import { AspectRatio, Tile } from "../types";
</script> </script>
<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
2x1
</AspectRatio>
<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
16x9
</AspectRatio>
<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
4x3
</AspectRatio>
<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
1x1
</AspectRatio>
<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
3x4
</AspectRatio>
<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
9x16
</AspectRatio>
<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
1x2
</AspectRatio>
<AspectRatio ratio="16x9"> <AspectRatio ratio="16x9">
<Tile style="height: 100%">Content</Tile> <Tile style="height: 100%">Content</Tile>
</AspectRatio> </AspectRatio>