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

feat(grid): support narrow prop for Grid, Row

Browse source
This commit is contained in:
Eric Liu 2020-07-24 21:31:39 -07:00
commit 77b4d32c62
3 changed files with 30 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/Grid/Grid.Story.svelte
View file

@ -47,6 +47,32 @@
</Row>
</Grid>
<h6>Narrow grid</h6>
<Grid narrow>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Responsive Grid</h6>
<Grid>
<Row>

2
src/Grid/Grid.svelte
View file

@ -1,6 +1,7 @@
<script>
export let as = false;
export let condensed = false;
export let narrow = false;
export let fullWidth = false;
export let noGutter = false;
export let noGutterLeft = false;
@ -12,6 +13,7 @@
$$restProps.class,
"bx--grid",
condensed && "bx--grid--condensed",
narrow && "bx--grid--narrow",
fullWidth && "bx--grid--full-width",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",

2
src/Grid/Row.svelte
View file

@ -1,6 +1,7 @@
<script>
export let as = false;
export let condensed = false;
export let narrow = false;
export let noGutter = false;
export let noGutterLeft = false;
export let noGutterRight = false;
@ -11,6 +12,7 @@
$$restProps.class,
"bx--row",
condensed && "bx--row--condensed",
narrow && "bx--row--narrow",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right",