From eba40e8961ad121cac8d42599094a0fdb01e6015 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 5 Apr 2018 17:48:05 -0400 Subject: [PATCH] docs(back-button): update the main docs and add usage --- core/src/components.d.ts | 28 ++++++- core/src/components/back-button/readme.md | 75 ++++++++----------- .../components/back-button/usage/angular.md | 47 ++++++++++++ .../back-button/usage/javascript.md | 47 ++++++++++++ 4 files changed, 149 insertions(+), 48 deletions(-) create mode 100644 core/src/components/back-button/usage/angular.md create mode 100644 core/src/components/back-button/usage/javascript.md diff --git a/core/src/components.d.ts b/core/src/components.d.ts index dc634a0f86..cc38159cb1 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -602,16 +602,26 @@ declare global { declare global { interface HTMLIonBackButtonElement extends HTMLStencilElement { + /** + * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). + */ + 'color': string; + /** + * The url to navigate back to by default when there is no history. + */ 'defaultHref': string; + /** + * The icon name to use for the back button. + */ 'icon': string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ 'mode': 'ios' | 'md'; /** - * The text property is used to provide custom text for the back button while using the default look-and-feel. + * The text to display in the back button. */ - 'text': string|undefined; + 'text': string | undefined; } var HTMLIonBackButtonElement: { prototype: HTMLIonBackButtonElement; @@ -630,16 +640,26 @@ declare global { } namespace JSXElements { export interface IonBackButtonAttributes extends HTMLAttributes { + /** + * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app). + */ + 'color'?: string; + /** + * The url to navigate back to by default when there is no history. + */ 'defaultHref'?: string; + /** + * The icon name to use for the back button. + */ 'icon'?: string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles). */ 'mode'?: 'ios' | 'md'; /** - * The text property is used to provide custom text for the back button while using the default look-and-feel. + * The text to display in the back button. */ - 'text'?: string|undefined; + 'text'?: string | undefined; } } } diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index 141c9191d5..a219243a4f 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -1,45 +1,8 @@ # ion-back-button -A back button is a component that allows you navigate back into app history. To -add a back button to your view, all you need is: - -```html - - - - - - - -``` - -The back button component is smart enough to know what to render and what content to show. - -If, however, you want more control over what is shown in the back button, you use the -`text` and `icon` properties. - -```html - - - - - - - -``` - -Or no button text at all: - - -```html - - - - - - - -``` +The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. + +To change what is displayed in the back button, use the `text` and `icon` properties. @@ -47,15 +10,28 @@ Or no button text at all: ## Properties +#### color + +string + +The color to use from your Sass `$colors` map. +Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. +For more information, see [Theming your App](/docs/theming/theming-your-app). + + #### defaultHref string +The url to navigate back to by default when there is no history. + #### icon string +The icon name to use for the back button. + #### mode @@ -70,21 +46,33 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl -The text property is used to provide custom text for the back button while using the -default look-and-feel. +The text to display in the back button. ## Attributes +#### color + +string + +The color to use from your Sass `$colors` map. +Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. +For more information, see [Theming your App](/docs/theming/theming-your-app). + + #### default-href string +The url to navigate back to by default when there is no history. + #### icon string +The icon name to use for the back button. + #### mode @@ -99,8 +87,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl -The text property is used to provide custom text for the back button while using the -default look-and-feel. +The text to display in the back button. diff --git a/core/src/components/back-button/usage/angular.md b/core/src/components/back-button/usage/angular.md new file mode 100644 index 0000000000..64bee569c9 --- /dev/null +++ b/core/src/components/back-button/usage/angular.md @@ -0,0 +1,47 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file diff --git a/core/src/components/back-button/usage/javascript.md b/core/src/components/back-button/usage/javascript.md new file mode 100644 index 0000000000..7283dcb73b --- /dev/null +++ b/core/src/components/back-button/usage/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file