mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Brandy Carney 94159291b2 feat(components): improve button states and add new css properties (#19440 )

Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. 

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```

2020-01-23 16:57:47 -05:00

test

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

usage

docs(back-button): fix vue usage

2019-09-10 17:03:35 -04:00

back-button.ios.scss

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

back-button.ios.vars.scss

fix(button): use correct border-radius on menu & back button (#18501 )

2019-06-10 17:58:04 -04:00

back-button.md.scss

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

back-button.md.vars.scss

fix(back-button): default md color is inhered

2018-09-25 21:02:40 +02:00

back-button.scss

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

back-button.tsx

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

readme.md

feat(components): improve button states and add new css properties (#19440 )

2020-01-23 16:57:47 -05:00

readme.md

ion-back-button

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.

Usage

Angular

<!-- Default back button -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with a default href -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with custom text and icon -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
          [text]="buttonText"
          [icon]="buttonIcon">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with no text and custom icon -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="" icon="add"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Danger back button next to a menu button -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-back-button color="danger"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Javascript

<!-- Default back button -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with a default href -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with custom text and icon -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="Volver" icon="close"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Back button with no text and custom icon -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="" icon="add"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<!-- Danger back button next to a menu button -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-back-button color="danger"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

React

import React from 'react';
import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';

export const BackButtonExample: React.FC = () => (
  <IonContent>
    {/*-- Default back button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with a default href --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="home" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with custom text and icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton text="buttonText" icon="buttonIcon" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Back button with no text and custom icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton text="" icon="add" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>

    {/*-- Danger back button next to a menu button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton />
          <IonBackButton color="danger" />
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  </IonContent>
);

Vue

<template>
  <!-- Default back button -->
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <!-- Back button with a default href -->
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button default-href="home"></ion-back-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <!-- Back button with custom text and icon -->
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button
            :text="buttonText"
            :icon="buttonIcon">
        </ion-back-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <!-- Back button with no text and custom icon -->
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button text="" icon="add"></ion-back-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <!-- Danger back button next to a menu button -->
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
        <ion-back-button color="danger"></ion-back-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
</template>

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`defaultHref`	`default-href`	The url to navigate back to by default when there is no history.	`string \| undefined`	`undefined`
`disabled`	`disabled`	If `true`, the user cannot interact with the button.	`boolean`	`false`
`icon`	`icon`	The icon name to use for the back button.	`null \| string \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`
`text`	`text`	The text to display in the back button.	`null \| string \| undefined`	`undefined`
`type`	`type`	The type of the button.	`"button" \| "reset" \| "submit"`	`'button'`

CSS Custom Properties

Name	Description
`--background`	Background of the button
`--background-focused`	Background of the button when focused with the tab key
`--background-focused-opacity`	Opacity of the button background when focused with the tab key
`--background-hover`	Background of the button on hover
`--background-hover-opacity`	Opacity of the background on hover
`--border-radius`	Border radius of the button
`--color`	Text color of the button
`--color-focused`	Text color of the button when focused with the tab key
`--color-hover`	Text color of the button on hover
`--icon-font-size`	Font size of the button icon
`--icon-font-weight`	Font weight of the button icon
`--icon-margin-bottom`	Bottom margin of the button icon
`--icon-margin-end`	Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
`--icon-margin-start`	Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
`--icon-margin-top`	Top margin of the button icon
`--icon-padding-bottom`	Bottom padding of the button icon
`--icon-padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
`--icon-padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
`--icon-padding-top`	Top padding of the button icon
`--margin-bottom`	Bottom margin of the button
`--margin-end`	Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
`--margin-start`	Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
`--margin-top`	Top margin of the button
`--min-height`	Minimum height of the button
`--min-width`	Minimum width of the button
`--opacity`	Opacity of the button
`--padding-bottom`	Bottom padding of the button
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
`--padding-top`	Top padding of the button
`--ripple-color`	Color of the button ripple effect
`--transition`	Transition of the button

Dependencies

Depends on

ion-icon
ion-ripple-effect

Graph

graph TD;
  ion-back-button --> ion-icon
  ion-back-button --> ion-ripple-effect
  style ion-back-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS