@material/layout-grid
Advanced tools
@material/layout-grid - npm Package Compare versions
Comparing version 0.3.0 to 0.4.0
| { | ||
| "name": "@material/layout-grid", | ||
| "version": "0.3.0", | ||
| "version": "0.4.0", | ||
| "description": "The Material Components for the web layout grid component", | ||
@@ -5,0 +5,0 @@ "license": "Apache-2.0", |
@@ -95,4 +95,6 @@ <!--docs: | ||
| ### Column spans | ||
| ### Grid cells | ||
| #### Column spans | ||
| ```html | ||
@@ -135,9 +137,45 @@ <div class="mdc-layout-grid"> | ||
| #### Cell reordering | ||
| ### Max width | ||
| By default, items are positioned in the source order. However, you can reorder them by using the | ||
| `mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12. | ||
| ```html | ||
| <div class="mdc-layout-grid"> | ||
| <div class="mdc-layout-grid__inner"> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow | ||
| source order. | ||
| #### Cell alignment | ||
| Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different | ||
| behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of | ||
| `{top}`, `{middle}` or `{bottom}`. | ||
| ```html | ||
| <div class="mdc-layout-grid"> | ||
| <div class="mdc-layout-grid__inner"> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ### Grid with restricted width | ||
| #### Max width | ||
| MDC layout grids take up the parent element space by default. However, user can set `$mdc-layout-grid-max-width` to restrict the max-width of the layout grid. | ||
| ### Fixed column width grid | ||
| #### Fixed column width grid | ||
@@ -161,3 +199,17 @@ You can designate each column to have a certain width by using `mdc-layout-grid--fixed-column-width` modifier. The column width can be specified through sass map `$mdc-layout-grid-column-width` or css custom properties `--mdc-layout-grid-column-width-{screen_size}`. The column width is set to 72px on all devices by default. | ||
| #### Alignment of grid | ||
| The grid is by default center aligned. User can add `mdc-layout-grid--align-left` | ||
| or `mdc-layout-grid--align-right` modifier class to change this behavior. Note, these | ||
| modifiers will have no effect when the grid already fills its container. | ||
| ``` | ||
| <div class="mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-left"> | ||
| <div class="mdc-layout-grid__inner"> | ||
| <div class="mdc-layout-grid__cell"></div> | ||
| <div class="mdc-layout-grid__cell"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ### Nested grid | ||
@@ -186,38 +238,3 @@ | ||
| ### Reordering | ||
| By default, items are positioned in the source order. However, you can reorder them by using the | ||
| `mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12. | ||
| ```html | ||
| <div class="mdc-layout-grid"> | ||
| <div class="mdc-layout-grid__inner"> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow | ||
| source order. | ||
| ### Alignment | ||
| Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different | ||
| behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of | ||
| `{top}`, `{middle}` or `{bottom}`. | ||
| ```html | ||
| <div class="mdc-layout-grid"> | ||
| <div class="mdc-layout-grid__inner"> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div> | ||
| <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| ## Sass mixin usage | ||
@@ -224,0 +241,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by1.26%
484
- Number of lines in readme file
- increased by5.8%
310
Worsened metrics
- Total package byte prevSize
- decreased by-6.87%
59796