From 0f5601b3ae46ffd1242292578d954939d176af03 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 15 Jun 2018 17:09:50 -0400 Subject: [PATCH] style(loading): update the style of the code and docs --- core/src/components/grid/readme.md | 563 ++---------------------- core/src/components/loading/loading.tsx | 84 +--- core/src/components/loading/readme.md | 8 +- 3 files changed, 55 insertions(+), 600 deletions(-) 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()