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

Merge pull request #217 from IBM/grid

Browse source 
feat(grid): support gutter, aspectRatio props
This commit is contained in:
Eric Liu 2020-07-23 14:35:22 -07:00 • committed by GitHub
commit 18048d1fe1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/Grid/Column.svelte
View file

@ -1,16 +1,35 @@
<script>
export let as = false;
export let noGutter = false;
export let noGutterLeft = false;
export let noGutterRight = false;
/**
* Types for `sm`, `md`, `lg`, `xlg`, `max`:
* true
* Number
* { span: Number | true; offset?: Number }
* Aspect ratio of the column
* @type {("2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1")} [aspectRatio]
*/
export let aspectRatio = undefined;
/**
* @typedef {(boolean | number)} ColumnSize
* @typedef {Object} ColumnSizeDescriptor
* @property {ColumnSize} [ColumnSizeDescriptor.span] Column size
* @property {number} [ColumnSizeDescriptor.offset] Column offset
*/
/** @type {ColumnSize|ColumnSizeDescriptor} [sm] */
export let sm = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [md] */
export let md = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [lg] */
export let lg = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [xlg] */
export let xlg = undefined;
/** @type {ColumnSize|ColumnSizeDescriptor} [max] */
export let max = undefined;
const breakpoints = ["sm", "md", "lg", "xlg", "max"];
@ -43,9 +62,17 @@
.join(" ");
$: props = {
...$$restProps,
class: [$$restProps.class, columnClass, !columnClass && "bx--col"]
class: [
$$restProps.class,
columnClass,
!columnClass && "bx--col",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right",
aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
]
.filter(Boolean)
.join(" ")
.join(" "),
};
</script>

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

@ -22,7 +22,6 @@
<div class="grid">
<h6>Columns with auto-width</h6>
<Grid>
<Row>
<Column>
@ -49,7 +48,6 @@
</Grid>
<h6>Responsive Grid</h6>
<Grid>
<Row>
<Column sm={1} md={4} lg={8}>
@ -76,7 +74,6 @@
</Grid>
<h6>Columns with Offset</h6>
<Grid>
<Row>
<Column sm={{ span: 1, offset: 3 }}>
@ -103,7 +100,6 @@
</Grid>
<h6>Condensed Grid</h6>
<Grid condensed>
<Row>
<Column>
@ -130,7 +126,6 @@
</Grid>
<h6>Condensed Columns</h6>
<Grid>
<Row>
<Column>
@ -201,7 +196,6 @@
</Grid>
<h6>Full Width</h6>
<Grid fullWidth>
<Row>
<Column>
@ -226,4 +220,72 @@
</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 2x1</h6>
<Grid>
<Row>
<Column aspectRatio="2x1">1</Column>
<Column aspectRatio="2x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 16x9</h6>
<Grid>
<Row>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 4x3</h6>
<Grid>
<Row>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x1</h6>
<Grid>
<Row>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 3x4</h6>
<Grid>
<Row>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 9x16</h6>
<Grid>
<Row>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x2</h6>
<Grid>
<Row>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
</Row>
</Grid>
</div>

10
src/Grid/Grid.svelte
View file

@ -2,6 +2,9 @@
export let as = false;
export let condensed = false;
export let fullWidth = false;
export let noGutter = false;
export let noGutterLeft = false;
export let noGutterRight = false;
$: props = {
...$$restProps,
@ -9,10 +12,13 @@
$$restProps.class,
"bx--grid",
condensed && "bx--grid--condensed",
fullWidth && "bx--grid--full-width"
fullWidth && "bx--grid--full-width",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right",
]
.filter(Boolean)
.join(" ")
.join(" "),
};
</script>

14
src/Grid/Row.svelte
View file

@ -1,12 +1,22 @@
<script>
export let as = false;
export let condensed = false;
export let noGutter = false;
export let noGutterLeft = false;
export let noGutterRight = false;
$: props = {
...$$restProps,
class: [$$restProps.class, "bx--row", condensed && "bx--row--condensed"]
class: [
$$restProps.class,
"bx--row",
condensed && "bx--row--condensed",
noGutter && "bx--no-gutter",
noGutterLeft && "bx--no-gutter--left",
noGutterRight && "bx--no-gutter--right",
]
.filter(Boolean)
.join(" ")
.join(" "),
};
</script>