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

9
core/src/components/col/col.scss
View File

@ -4,6 +4,15 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --ion-grid-columns: The number of total Columns in the Grid
* @prop --ion-grid-column-padding: Padding for the Column
* @prop --ion-grid-column-padding-xs: Padding for the Column on xs screens and up
* @prop --ion-grid-column-padding-sm: Padding for the Column on sm screens and up
* @prop --ion-grid-column-padding-md: Padding for the Column on md screens and up
* @prop --ion-grid-column-padding-lg: Padding for the Column on lg screens and up
* @prop --ion-grid-column-padding-xl: Padding for the Column on xl screens and up
*/
@include make-breakpoint-padding($grid-column-paddings); @include make-breakpoint-padding($grid-column-paddings);
@include margin(0); @include margin(0);

12
core/src/components/col/readme.md
View File

@ -54,6 +54,18 @@ There are several attributes that can be added to a column to customize this beh
| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string` | | `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string` |
## CSS Custom Properties
| Name | Description |
| ------------------------------ | ------------------------------------------- |
| `--ion-grid-column-padding` | Padding for the Column |
| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up |
| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up |
| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up |
| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up |
| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

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

@ -4,6 +4,22 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :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 make-breakpoint-padding($grid-paddings);
@include margin-horizontal(auto); @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` | | `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/)* *Built with [StencilJS](https://stenciljs.com/)*