javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(grid): document the custom properties for all grid vars

Browse Source 
references #14850
This commit is contained in:
Brandy Carney
2018-08-16 18:14:29 -04:00
parent 0372aec650
commit 0ef06624a2
4 changed files with 55 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/grid/grid.scss
View File

@ -4,6 +4,22 @@
// --------------------------------------------------
:host {
/**
* @prop --ion-grid-padding: Padding for the Grid
* @prop --ion-grid-padding-xs: Padding for the Grid on xs screens
* @prop --ion-grid-padding-sm: Padding for the Grid on sm screens
* @prop --ion-grid-padding-md: Padding for the Grid on md screens
* @prop --ion-grid-padding-lg: Padding for the Grid on lg screens
* @prop --ion-grid-padding-xl: Padding for the Grid on xl screens
*
* @prop --ion-grid-width: Width of the fixed Grid
* @prop --ion-grid-width-xs: Width of the fixed Grid on xs screens
* @prop --ion-grid-width-sm: Width of the fixed Grid on sm screens
* @prop --ion-grid-width-md: Width of the fixed Grid on md screens
* @prop --ion-grid-width-lg: Width of the fixed Grid on lg screens
* @prop --ion-grid-width-xl: Width of the fixed Grid on xl screens
*/
@include make-breakpoint-padding($grid-paddings);
@include margin-horizontal(auto);

18
core/src/components/grid/readme.md
View File

@ -17,6 +17,24 @@ See [Grid Layout](/docs/layout/grid) for more information.
| `fixed` | `fixed` | If true, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` |
## CSS Custom Properties
| Name | Description |
| ----------------------- | ------------------------------------- |
| `--ion-grid-padding` | Padding for the Grid |
| `--ion-grid-padding-lg` | Padding for the Grid on lg screens |
| `--ion-grid-padding-md` | Padding for the Grid on md screens |
| `--ion-grid-padding-sm` | Padding for the Grid on sm screens |
| `--ion-grid-padding-xl` | Padding for the Grid on xl screens |
| `--ion-grid-padding-xs` | Padding for the Grid on xs screens |
| `--ion-grid-width` | Width of the fixed Grid |
| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens |
| `--ion-grid-width-md` | Width of the fixed Grid on md screens |
| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens |
| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens |
| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*