mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00

Files

Brandy Carney 051198928e fix(buttons): use theme/color toolbar colors for buttons (#18191 )

- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840

2019-05-14 18:02:30 -04:00

test/icon

test(rtl): add rtl script to all e2e tests (#17009 )

2019-01-08 15:06:23 -06:00

usage

docs(vue): add usage docs for all non-controller components (#17643 )

2019-02-28 22:01:07 -06:00

buttons.ios.scss

fix(buttons): use theme/color toolbar colors for buttons (#18191 )

2019-05-14 18:02:30 -04:00

buttons.ios.vars.scss

fix(toolbar): style all slotted content in order not only buttons (#16617 )

2018-12-07 17:55:59 -05:00

buttons.md.scss

fix(buttons): use theme/color toolbar colors for buttons (#18191 )

2019-05-14 18:02:30 -04:00

buttons.md.vars.scss

fix(toolbar): style all slotted content in order not only buttons (#16617 )

2018-12-07 17:55:59 -05:00

buttons.scss

refactor(components): consistent css variables for size (#16600 )

2018-12-14 15:45:14 -05:00

buttons.tsx

fix(components): include mode classes on components for use in shadow (#17838 )

2019-04-16 17:28:21 -04:00

readme.md

docs(vue): add usage docs for all non-controller components (#17643 )

2019-02-28 22:01:07 -06:00

readme.md

ion-buttons

The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the <ion-buttons> element.

The <ion-buttons> element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

Slot	Description
`secondary`	Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode.
`primary`	Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.
`start`	Positions to the `left` of the content in LTR, and to the `right` in RTL.
`end`	Positions to the `right` of the content in LTR, and to the `left` in RTL.

Usage

Angular

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button (click)="clickedStar()">
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Right side menu toggle</ion-title>
  <ion-buttons slot="end">
    <ion-menu-button autoHide="false"></ion-menu-button>
  </ion-buttons>
</ion-toolbar>

Javascript

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title>Back Button</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="primary">
    <ion-button onclick="clickedStar()">
      <ion-icon slot="icon-only" name="star"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>Right side menu toggle</ion-title>
  <ion-buttons slot="end">
    <ion-menu-toggle auto-hide="false">
      <ion-button>
        <ion-icon slot="icon-only" name="menu"></ion-icon>
      </ion-button>
    </ion-menu-toggle>
  </ion-buttons>
</ion-toolbar>

React

import React from 'react';

import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    <IonToolbar>
      <IonButtons slot="start">
        <IonBackButton goBack={() => {}} />
      </IonButtons>
      <IonTitle>Back Button</IonTitle>
    </IonToolbar>

    <IonToolbar>
      <IonButtons slot="secondary">
        <IonButton>
          <IonIcon slot="icon-only" name="contact" />
        </IonButton>
        <IonButton> />
          <IonIcon slot="icon-only" name="search" />
        </IonButton>
      </IonButtons>
      <IonTitle>Default Buttons</IonTitle>
      <IonButtons slot="primary">
        <IonButton color="secondary"> />
          <IonIcon slot="icon-only" name="more" />
        </IonButton>
      </IonButtons>
    </IonToolbar>

    <IonToolbar>
      <IonButtons slot="primary">
        <IonButton onClick={() => {}}>
          <IonIcon slot="icon-only" name="star" />
        </IonButton>
      </IonButtons>
      <IonTitle>Right side menu toggle</IonTitle>
      <IonButtons slot="end">
        <IonMenuButton autoHide={false} />
      </IonButtons>
    </IonToolbar>
  </>
);

export default Example;


### Vue

```html
<template>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Back Button</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" name="contact"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Default Buttons</ion-title>
    <ion-buttons slot="primary">
      <ion-button color="secondary">
        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <ion-toolbar>
    <ion-buttons slot="primary">
      <ion-button @click="clickedStar()">
        <ion-icon slot="icon-only" name="star"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Right side menu toggle</ion-title>
    <ion-buttons slot="end">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</template>

Built with StencilJS