ion-buttons

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4导航条组件ion-buttons对项目进行布局。

ion-buttons官方文档地址:https://ionicframework.com/docs/api/buttons

The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the element.

The 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.

ion-buttons　用法(Usage)

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button>ion-back-button>
  ion-buttons>
  <ion-title>Back Buttonion-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 Buttonsion-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 toggleion-title>
  <ion-buttons slot="end">
    <ion-menu-button autoHide="false">ion-menu-button>
  ion-buttons>
ion-toolbar>

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button>ion-back-button>
  ion-buttons>
  <ion-title>Back Buttonion-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 Buttonsion-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 toggleion-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>

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 ButtonIonTitle>
    IonToolbar>

    <IonToolbar>
      <IonButtons slot="secondary">
        <IonButton>
          <IonIcon slot="icon-only" name="contact" />
        IonButton>
        <IonButton> />
          <IonIcon slot="icon-only" name="search" />
        IonButton>
      IonButtons>
      <IonTitle>Default ButtonsIonTitle>
      <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 toggleIonTitle>
      <IonButtons slot="end">
        <IonMenuButton autoHide={false} />
      IonButtons>
    IonToolbar>
  >
);

export default Example;

<template>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button>ion-back-button>
    ion-buttons>
    <ion-title>Back Buttonion-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 Buttonsion-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 toggleion-title>
    <ion-buttons slot="end">
      <ion-menu-button autoHide="false">ion-menu-button>
    ion-buttons>
  ion-toolbar>
template>

ion-buttons

ion-buttons 用法(Usage)

ion-buttons　用法(Usage)