element-plus/website/docs/jp/button.md

Button

広く使われている button です。

基本的な使い方

:::demo Button のスタイルを定義するには type, plain, round, circle を使います。

<el-row>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
</el-row>

<el-row>
  <el-button plain>Plain</el-button>
  <el-button type="primary" plain>Primary</el-button>
  <el-button type="success" plain>Success</el-button>
  <el-button type="info" plain>Info</el-button>
  <el-button type="warning" plain>Warning</el-button>
  <el-button type="danger" plain>Danger</el-button>
</el-row>

<el-row>
  <el-button round>Round</el-button>
  <el-button type="primary" round>Primary</el-button>
  <el-button type="success" round>Success</el-button>
  <el-button type="info" round>Info</el-button>
  <el-button type="warning" round>Warning</el-button>
  <el-button type="danger" round>Danger</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>

:::

無効化 button

disabled 属性は button が無効になっているかどうかを判定します。

:::demo button が無効になっているかどうかを判断するには disabled 属性を用いる。これは Boolean 値を受け取ります。

<el-row>
  <el-button disabled>Default</el-button>
  <el-button type="primary" disabled>Primary</el-button>
  <el-button type="success" disabled>Success</el-button>
  <el-button type="info" disabled>Info</el-button>
  <el-button type="warning" disabled>Warning</el-button>
  <el-button type="danger" disabled>Danger</el-button>
</el-row>

<el-row>
  <el-button plain disabled>Plain</el-button>
  <el-button type="primary" plain disabled>Primary</el-button>
  <el-button type="success" plain disabled>Success</el-button>
  <el-button type="info" plain disabled>Info</el-button>
  <el-button type="warning" plain disabled>Warning</el-button>
  <el-button type="danger" plain disabled>Danger</el-button>
</el-row>

:::

テキスト button

枠線と背景のない button です。

:::demo

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

:::

アイコン button

アイコンを使って Button にさらに意味を持たせましょう。アイコンだけでスペースを確保したり、テキストと一緒に使うこともできます。

:::demo アイコンを追加するには icon 属性を使います。アイコンのリストは要素のアイコンコンポーネントにあります。テキストの右側にアイコンを追加するには、<i> タグを使用します。カスタムアイコンも使用できます。

<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</el-button>
<el-button type="primary"
  >Upload<i class="el-icon-upload el-icon-right"></i
></el-button>

:::

button グループ

button グループとして表示され、同じよう操作をグループ化することができます。

:::demo button をグループ化するにはタグ <el-button-group> を使用します。

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
  <el-button type="primary"
    >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>

:::

読み込み button

button をクリックしてデータを読み込むと、読み込み状態が表示されます。

:::demo ロード状態を表示するために loading 属性を true に設定します。

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

:::

サイズ

Button コンポーネントにはデフォルトサイズの他に、3 つの追加サイズが用意されており、異なるシナリオの中から選択することができます。

:::demo 追加のサイズを medium, small, mini で設定するには、属性 size を使用します。

<el-row>
  <el-button>Default</el-button>
  <el-button size="medium">Medium</el-button>
  <el-button size="small">Small</el-button>
  <el-button size="mini">Mini</el-button>
</el-row>
<el-row>
  <el-button round>Default</el-button>
  <el-button size="medium" round>Medium</el-button>
  <el-button size="small" round>Small</el-button>
  <el-button size="mini" round>Mini</el-button>
</el-row>
<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button icon="el-icon-search" size="medium" circle></el-button>
  <el-button icon="el-icon-search" size="small" circle></el-button>
  <el-button icon="el-icon-search" size="mini" circle></el-button>
</el-row>

:::

Button 属性

Attribute	Description	Type	Accepted values	Default
size	button サイズ	string	medium / small / mini	—
type	button タイプ	string	primary / success / warning / danger / info / text	—
plain	プレーン button か判定する	boolean	—	false
round	ラウンド(丸みを持った)button か判定する	boolean	—	false
circle	サークル(丸)button か判定する	boolean	—	false
loading	読み込み中か判定する	boolean	—	false
disabled	button を無効化する	boolean	—	false
icon	アイコンクラス名	string	—	—
autofocus	ネイティブ button の オートフォーカス と同じ	boolean	—	false
native-type	ネイティブ button の タイプ と同じ	string	button / submit / reset	button

Button-Group 属性

Attribute	Description	Type	Accepted Values	Default
size	control the size of buttons in this button-group	string	medium / small / mini	—

Button-Group スロット

Name	Description
default	customize button group content