diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index 231a3bf066..d0f509ba8a 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -2,542 +2,53 @@
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.
-
-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) |
+It is composed of two units — a grid, and column(s). Columns will expand to fill the grid, 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 can be customized using CSS.
+See [Responsive Grid](/docs/layout/grid) for more information.
## 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
-);
-```
+By default, columns will stretch to fill the entire height of the grid and wrap when necessary.
+There are several attributes that can be added to a grid to customize this behavior.
+
+| Property | Description |
+|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| nowrap | Adds `flex-wrap: nowrap`. Forces the columns to a single row. |
+| wrap-reverse | Adds `flex-wrap: wrap-reverse`. The columns will wrap in reverse. |
+| align-items-start | Adds `align-items: flex-start`. All columns will be vertically aligned at the top, unless they specify their own alignment. |
+| align-items-center | Adds `align-items: center`. All columns will be vertically aligned in the center, unless they specify their own alignment. |
+| align-items-end | Adds `align-items: flex-end`. All columns will be vertically aligned at the bottom, unless they specify their own alignment. |
+| align-items-stretch | Adds `align-items: stretch`. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment. |
+| align-items-baseline | Adds `align-items: baseline`. All columns will be vertically aligned at their baselines, unless they specify their own alignment. |
+| justify-content-start | Adds `justify-content: start`. All columns will be horizontally aligned at the start. |
+| justify-content-center | Adds `justify-content: center`. All columns will be horizontally aligned at the center. |
+| justify-content-end | Adds `justify-content: end`. All columns will be horizontally aligned at the end. |
+| justify-content-around | Adds `justify-content: space-around`. All columns will be horizontally aligned with equal space around them. |
+| justify-content-between | Adds `justify-content: space-between`. All columns will be horizontally aligned with a half-size space on either end. |
+## Properties
+
+#### fixed
+
+boolean
+
+If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
+
+
+## Attributes
+
+#### fixed
+
+boolean
+
+If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
+
+
----------------------------------------------
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 2720570b71..d0ad3d1038 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -1,27 +1,6 @@
-import {
- Component,
- Element,
- Event,
- EventEmitter,
- Listen,
- Method,
- Prop
-} from '@stencil/core';
-import {
- Animation,
- AnimationBuilder,
- Color,
- Config,
- Mode
-} from '../../interface';
-import {
- BACKDROP,
- OverlayEventDetail,
- OverlayInterface,
- dismiss,
- eventMethod,
- present
-} from '../../utils/overlays';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
+import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
@@ -50,10 +29,8 @@ export class Loading implements OverlayInterface {
@Element() el!: HTMLElement;
- @Prop({ connect: 'ion-animation-controller' })
- animationCtrl!: HTMLIonAnimationControllerElement;
- @Prop({ context: 'config' })
- config!: Config;
+ @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
+ @Prop({ context: 'config' }) config!: Config;
@Prop() overlayId!: number;
@Prop() keyboardClose = true;
@@ -127,33 +104,26 @@ export class Loading implements OverlayInterface {
/**
* Emitted after the loading has presented.
*/
- @Event({ eventName: 'ionLoadingDidPresent' })
- didPresent!: EventEmitter;
+ @Event({ eventName: 'ionLoadingDidPresent' }) didPresent!: EventEmitter;
/**
* Emitted before the loading has presented.
*/
- @Event({ eventName: 'ionLoadingWillPresent' })
- willPresent!: EventEmitter;
+ @Event({ eventName: 'ionLoadingWillPresent' }) willPresent!: EventEmitter;
/**
* Emitted before the loading has dismissed.
*/
- @Event({ eventName: 'ionLoadingWillDismiss' })
- willDismiss!: EventEmitter;
+ @Event({ eventName: 'ionLoadingWillDismiss' }) willDismiss!: EventEmitter;
/**
* Emitted after the loading has dismissed.
*/
- @Event({ eventName: 'ionLoadingDidDismiss' })
- didDismiss!: EventEmitter;
+ @Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter;
componentWillLoad() {
if (!this.spinner) {
- this.spinner = this.config.get(
- 'loadingSpinner',
- this.mode === 'ios' ? 'lines' : 'crescent'
- );
+ this.spinner = this.config.get('loadingSpinner', this.mode === 'ios' ? 'lines' : 'crescent');
}
}
@@ -175,13 +145,7 @@ export class Loading implements OverlayInterface {
*/
@Method()
async present(): Promise {
- await present(
- this,
- 'loadingEnter',
- iosEnterAnimation,
- mdEnterAnimation,
- undefined
- );
+ await present( this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined);
if (this.duration) {
this.durationTimeout = setTimeout(
@@ -199,40 +163,24 @@ export class Loading implements OverlayInterface {
if (this.durationTimeout) {
clearTimeout(this.durationTimeout);
}
- return dismiss(
- this,
- data,
- role,
- 'loadingLeave',
- iosLeaveAnimation,
- mdLeaveAnimation
- );
+ return dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
}
/**
* Returns a promise that resolves when the loading did dismiss. It also accepts a callback
- * that is called in the same circustances.
- *
+ * that is called in the same circumstances.
*/
@Method()
- onDidDismiss(
- callback?: (detail: OverlayEventDetail) => void
- ): Promise {
+ onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise {
return eventMethod(this.el, 'ionLoadingDidDismiss', callback);
}
/**
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback
- * that is called in the same circustances.
- *
- * ```
- * const {data, role} = await loading.onWillDismiss();
- * ```
+ * that is called in the same circumstances.
*/
@Method()
- onWillDismiss(
- callback?: (detail: OverlayEventDetail) => void
- ): Promise {
+ onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise {
return eventMethod(this.el, 'ionLoadingWillDismiss', callback);
}
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 85336df492..f14f4128b4 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -240,17 +240,13 @@ Dismiss the loading overlay after it has been presented.
#### onDidDismiss()
Returns a promise that resolves when the loading did dismiss. It also accepts a callback
-that is called in the same circustances.
+that is called in the same circumstances.
#### onWillDismiss()
Returns a promise that resolves when the loading will dismiss. It also accepts a callback
-that is called in the same circustances.
-
-```
-const {data, role} = await loading.onWillDismiss();
-```
+that is called in the same circumstances.
#### present()