005_ button

1. Button Button

1.1. Common operation button .

1.2. Button properties

Parameters	explain	type	Optional value	The default value is
size	Size	string	medium / small / mini	nothing
type	type	string	primary / success / warning / danger / info / text	nothing
plain	Whether the simple button	boolean	nothing	false
round	Whether the rounded button	boolean	nothing	false
circle	Is it a round button	boolean	nothing	false
loading	Whether to load the State	boolean	nothing	false
disabled	Whether to disable the State	boolean	nothing	false
icon	Icon class name	string	nothing	nothing
autofocus	Whether to focus by default	boolean	nothing	false
native-type	Native type attribute	string	button / submit / reset	button

2. Button Button example

2.1. Use the scaffold to create a new one named element-ui-button Front end projects , At the same time to install Element plug-in unit .

2.2. To write App.vue 

<template>
  <div id="app">
    <h1> Basic usage </h1>
    <el-row>
      <el-button> Default button </el-button>
      <el-button type="primary"> Main buttons </el-button>
      <el-button type="success"> Success button </el-button>
      <el-button type="info"> Information buttons </el-button>
      <el-button type="warning"> Warning button </el-button>
      <el-button type="danger"> Danger button </el-button>
    </el-row>
    <el-row>
      <el-button plain> Simple button </el-button>
      <el-button type="primary" plain> Main buttons </el-button>
      <el-button type="success" plain> Success button </el-button>
      <el-button type="info" plain> Information buttons </el-button>
      <el-button type="warning" plain> Warning button </el-button>
      <el-button type="danger" plain> Danger button </el-button>
    </el-row>
    <el-row>
      <el-button round> Rounded button </el-button>
      <el-button type="primary" round> Main buttons </el-button>
      <el-button type="success" round> Success button </el-button>
      <el-button type="info" round> Information buttons </el-button>
      <el-button type="warning" round> Warning button </el-button>
      <el-button type="danger" round> Danger button </el-button>
    </el-row>
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

    <h1> Disabled state </h1>
    <el-row>
      <el-button disabled> Default button </el-button>
      <el-button type="primary" disabled> Main buttons </el-button>
      <el-button type="success" disabled> Success button </el-button>
      <el-button type="info" disabled> Information buttons </el-button>
      <el-button type="warning" disabled> Warning button </el-button>
      <el-button type="danger" disabled> Danger button </el-button>
    </el-row>

    <h1> Text button </h1>
    <el-button type="text"> Text button </el-button>
    <el-button type="text" disabled> Text button </el-button>

    <h1> Icon button </h1>
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search"> Search for </el-button>
    <el-button type="primary"> Upload <i class="el-icon-upload el-icon--right"></i></el-button>

    <h1> Button group </h1>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left"> The previous page </el-button>
      <el-button type="primary"> The next page <i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>

    <h1> Loading </h1>
    <el-button type="primary" loading="true"> Loading </el-button>

    <h1> Different sizes </h1>
    <el-row>
      <el-button> Default button </el-button>
      <el-button size="medium"> Medium button </el-button>
      <el-button size="small"> Small buttons </el-button>
      <el-button size="mini"> Super small button </el-button>
    </el-row>
  </div>
</template>

<style>
  .el-row {
    margin: 10px;
  }
</style>

2.3. Run the project