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

Add padding prop to Grid component (#420)

Browse source 
* Add padding prop to Grid component

* Fix file name

* Build lib

* Typo

Co-authored-by: Richard O'flynn <richard.oflynn@brighter-software.co.uk>
This commit is contained in:
Richard O'flynn 2020-11-27 12:08:30 +00:00 • committed by GitHub
commit b597a64131
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 116 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/COMPONENT_API.json
View file

@ -4661,6 +4661,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to all columns",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -4737,6 +4747,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to all columns",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -4794,6 +4814,16 @@
"constant": false,
"reactive": false
},
{
"name": "padding",
"kind": "let",
"description": "Set to `true` to add top and bottom padding to the column",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "aspectRatio",
"kind": "let",

4
docs/src/pages/components/Grid.svx
View file

@ -33,3 +33,7 @@ components: ["Grid", "Row", "Column"]
### Aspect ratio columns
<FileSource src="/framed/Grid/AspectRatioColumns" />
### Padded columns
<FileSource src="/framed/Grid/PaddedGrid" />

29
docs/src/pages/framed/Grid/PaddedGrid.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<Grid narrow padding>
<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>
<Grid narrow>
<Row padding>
<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>
<Row>
<Column padding 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>