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

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> </Row>
</Grid> </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> <h6>Responsive Grid</h6>
<Grid> <Grid>
<Row> <Row>

2
src/Grid/Grid.svelte
View file

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

2
src/Grid/Row.svelte
View file

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