import { Directive } from '@angular/core'; /** * @name Grid * @module ionic * @description * * The grid is a powerful mobile-first flexbox system for building custom layouts. * It is heavily influenced by [Bootstrap's grid system](http://v4-alpha.getbootstrap.com/layout/grid/). * * The grid is composed of three units — a grid, row(s) and column(s). Columns will expand to fill their * row, and will resize to fit additional columns. It is based on a 12 column layout with different * breakpoints based on the screen size. The number of columns and breakpoints can be fully customized * using Sass. * * - [How it works](#how-it-works) * - [Grid size](#grid-size) * - [Grid attributes](#grid-attributes) * - [Default breakpoints](#default-breakpoints) * - [Auto-layout columns](#auto-layout-columns) * - [Equal-width](#equal-width) * - [Setting one column width](#setting-one-column-width) * - [Variable-width](#variable-width) * - [Responsive attributes](#responsive-attributes) * - [All breakpoints](#all-breakpoints) * - [Stacked to horizontal](#stacked-to-horizontal) * - [Reordering](#reordering) * - [Offsetting columns](#offsetting-columns) * - [Push and pull](#push-and-pull) * - [Alignment](#alignment) * - [Vertical Alignment](#vertical-alignment) * - [Horizontal Alignment](#horizontal-alignment) * - [Customizing the grid](#customizing-the-grid) * - [Number of columns and padding](#number-of-columns-and-padding) * - [Grid tiers](#grid-tiers) * * * ## How it works * * The grid is a mobile-first system made up of any number of rows and columns. * It is built with flexbox making it extremely responsive. The components that * make up the grid can be written as an element (e.g., ``) or added as * an attribute to any element (e.g., `

`). * * Here's how it works: * * - Grids act as a container for all rows and columns. Grids take up the full width of their container, * but adding the `fixed` attribute will specify the width per screen size, see [grid size](#grid-size) below. * - Rows are horizontal groups of columns that line the columns up properly. * - Content should be placed within columns, and only columns may be immediate children of rows. * - Grid columns without a specified width will automatically have equal widths. * For example, four instances of `col-sm` will each automatically be 25% wide for small breakpoints. * - Column attributes indicate the number of columns to use out of the default 12 per row. * So, `col-4` can be added in order to have three equal-width columns. * - Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element. * - Columns have padding between individual columns, however, the padding can be removed from the grid and * columns by adding `no-padding` on the grid. * - There are five grid tiers by default, one for each responsive breakpoint: all breakpoints (extra small), * small, medium, large, and extra large. * - Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than it * (e.g., `col-sm-4` applies to small, medium, large, and extra large devices). * - Grids can easily be customized via Sass variables. See [customizing the grid](#customizing-the-grid). * * There are some [known bugs with flexbox](https://github.com/philipwalton/flexbugs) that * should be checked prior to creating issues with Ionic. * * ## Grid size * * By default, the grid will take up 100% width. To set a maximum width based on the screen * size add the `fixed` attribute. The maximum width of the grid for each breakpoint is defined * in the `$grid-max-widths` Sass variable. For more information, see * [customizing the grid](#customizing-the-grid). * * | Name | Value | Description | * |----------|----------|-----------------------------------------------------| * | xs | auto | Don't set the grid width for xs screens | * | sm | 540px | Set grid width to 540px when (min-width: 576px) | * | md | 720px | Set grid width to 720px when (min-width: 768px) | * | lg | 960px | Set grid width to 960px when (min-width: 992px) | * | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | * * * ## Grid attributes * * The grid takes up full width and has padding added to it based on the screen size. There are two * attributes that can be used to adjust this behavior. * * | Property | Description | * |-----------------|-------------------------------------------------------------------------------------------------------------------| * | no-padding | Removes padding from the grid and immediate children columns. | * | fixed | Set a max width based on the screen size. | * * * ## Default breakpoints * * The default breakpoints are defined by the `$grid-breakpoints` Sass variable. It can be * customized to use different values for the breakpoint, rename and add/remove breakpoints. * For more information, see [customizing the grid](#customizing-the-grid). * * | Name | Value | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description | * |----------|----------|--------------|---------------|--------------|-------------|---------------------------------------------------| * | xs | 0 | `col-` | `offset-` | `push-` | `pull-` | Set columns when (min-width: 0) | * | sm | 576px | `col-sm-` | `offset-sm-` | `push-sm-` | `pull-sm-` | Set columns when (min-width: 576px) | * | md | 768px | `col-md-` | `offset-md-` | `push-md-` | `pull-md-` | Set columns when (min-width: 768px) | * | lg | 992px | `col-lg-` | `offset-lg-` | `push-lg-` | `pull-lg-` | Set columns when (min-width: 992px) | * | xl | 1200px | `col-xl-` | `offset-xl-` | `push-xl-` | `pull-xl-` | Set columns when (min-width: 1200px) | * * _Note: the first breakpoint must have the value set to 0 and all breakpoint values must be in * ascending order._ * * ## Auto-layout columns * * ### Equal-width * * By default, columns will take up equal width inside of a row for all devices and screen sizes. * * ``` * * * * 1 of 2 * * * 2 of 2 * * * * * 1 of 3 * * * 2 of 3 * * * 3 of 3 * * * * ``` * * ### Setting one column width * * Set the width of one column and the others will automatically resize around it. * This can be done using our predefined grid attributes. In the example below, * the other columns will resize no matter the width of the center column. * * ``` * * * * 1 of 3 * * * 2 of 3 (wider) * * * 3 of 3 * * * * * 1 of 3 * * * 2 of 3 (wider) * * * 3 of 3 * * * * ``` * * ### Variable-width * * Using the `col-{breakpoint}-auto` attributes, the column can size itself based on the * natural width of its content. This is extremely useful for setting a column width * using pixels. The columns next to the variable-width column will resize to fill the row. * * ``` * * * * 1 of 3 * * * Variable width content * * * 3 of 3 * * * * * 1 of 4 * * * 2 of 4 * * * * * * 4 of 4 * * * * ``` * * * ## Responsive attributes * * ### All breakpoints * * To customize a column's width for all devices and screens, add the `col-*` * attribute. These attributes tell the column to take up `*` columns out * of the available columns. * * ``` * * * * 1 of 4 * * * 2 of 4 * * * 3 of 4 * * * 4 of 4 * * * * ``` * * ### Stacked to horizontal * * Use a combination of width and breakpoint attributes to create a grid that starts out stacked * on extra small screens before becoming horizontal on small screens. * * ``` * * * * 1 of 4 * * * 2 of 4 * * * 3 of 4 * * * 4 of 4 * * * * ``` * * * ## Reordering * * ### Offsetting columns * * Move columns to the right by adding the `offset-*` attributes. These attributes * increase the margin start of the column by `*` columns. For example, in the following * grid the last column will be offset by 3 columns and take up 3 columns: * * ``` * * * * 1 of 2 * * * 2 of 2 * * * * ``` * * Offsets can also be added based on screen breakpoints. Here's an example of a * grid where the last column will be offset by 3 columns for `md` screens and up: * * ``` * * * * 1 of 3 * * * 2 of 3 * * * 3 of 3 * * * * ``` * * ### Push and pull * * Reorder the columns by adding the `push-*` and `pull-*` attributes. These attributes * adjust the `left` and `right` of the columns by `*` columns making it easy to reorder * columns. For example, in the following grid the column with the `1st col` description * will actually be the last column and the `2nd col` will be the first column. * * ``` * * * * 1 of 2 * * * 2 of 2 * * * * ``` * * Push and pull can also be added based on screen breakpoints. In the following example, * the column with the `3rd` column description will actually be the first column for * `md` screens and up: * * ``` * * * * 1 of 3 * * * 2 of 3 * * * 3 of 3 * * * * ``` * * * ## Alignment * * ### Vertical alignment * * All columns can be vertically aligned inside of a row by adding different * attributes to the row. For a list of available attributes, see * [row attributes](../Row#row-attributes). * * ``` * * * * 1 of 4 * * * 2 of 4 * * * 3 of 4 * * * 4 of 4
#
#
# * * * * * * 1 of 4 * * * 2 of 4 * * * 3 of 4 * * * 4 of 4
#
#
# * * * * * * 1 of 4 * * * 2 of 4 * * * 3 of 4 * * * 4 of 4
#
#
# * * * * ``` * * Columns can also align themselves differently than other columns by * adding the alignment attribute directly to the column. For a list of available * attributes, see [column attributes](../Col#column-attributes). * * ``` * * * *

* 1 of 4 *

* * *

* 2 of 4 *

* * *

* 3 of 4 *

* * *

* 4 of 4
#
#
# *

* * * * ``` * * ### Horizontal alignment * * All columns can be horizontally aligned inside of a row by adding different * attributes to the row. For a list of available attributes, see * [row attributes](../Row#row-attributes). * * ``` * * * * 1 of 2 * * * 2 of 2 * * * * * * 1 of 2 * * * 2 of 2 * * * * * * 1 of 2 * * * 2 of 2 * * * * * * 1 of 2 * * * 2 of 2 * * * * * * 1 of 2 * * * 2 of 2 * * * * ``` * * * ## Customizing the grid * * Using our built-in grid Sass variables and maps, it’s possible to completely customize * the predefined grid attributes. Change the number of breakpoints, the media query values, * the number of columns, and more. * * ### Number of columns and padding * * The number of grid columns and their padding can be modified via Sass variables. * `$grid-columns` is used to generate the widths (in percent) of each individual column. * `$grid-padding-width` is used for the padding on the grid, while `$grid-padding-widths` * allows breakpoint-specific widths that are divided evenly across `padding-left` and * `padding-right` as well as `padding-top` and `padding-bottom` of the grid and columns. * * ``` * $grid-columns: 12 !default; * * $grid-padding-width: 10px !default; * * $grid-padding-widths: ( * xs: $grid-padding-width, * sm: $grid-padding-width, * md: $grid-padding-width, * lg: $grid-padding-width, * xl: $grid-padding-width * ) !default; * ``` * * ### Grid tiers * * To customize the breakpoints and their values, override the values of * `$grid-breakpoints` and `$grid-max-widths`. For example, to only use * 3 breakpoints, the following could be written: * * ``` * $grid-breakpoints: ( * sm: 0, * md: 768px, * lg: 1024px * ); * * $grid-max-widths: ( * sm: 420px, * md: 720px, * lg: 960px * ); * ``` * */ export class Grid { } Grid.decorators = [ { type: Directive, args: [{ selector: 'ion-grid, [ion-grid]', host: { 'class': 'grid' } },] }, ]; /** @nocollapse */ Grid.ctorParameters = () => []; //# sourceMappingURL=grid.js.map