要素 el-button ボタンコンポーネントの使用の詳細な説明

1. 背景

ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事ではそれらを紹介します。

まず、さまざまなボタンの効果図を見てみましょう。

ソースコードを分析する前に、ボタンの使用に関する公式ドキュメントを見てみましょう。

2. ボタンの分類

el-button ボタンの分類は基本的に色で区別されます。また、type="text" のテキストボタンもあります。テキストボタンは比較的小さいため、テーブルの各行の操作バー部分に適しています。

ボタンのカテゴリ:

  <el-button>デフォルト</el-button>
  <el-button type="primary">プライマリ</el-button>
  <el-button type="success">成功</el-button>
  <el-button type="info">情報</el-button>
  <el-button type="warning">警告</el-button>
  <el-button type="danger">危険</el-button>
  <el-button type="text">テキスト</el-button>

3. ボタンスタイル

要素には、プレーンボタン、丸いボタン、円形ボタンが用意されています。円形ボタンには通常、アイコンが 1 つしか含まれないことに注意してください。コードは次のとおりです。

ボタンスタイル:

  <el-button type="primary" plain>プレーンボタン</el-button>
  <el-button type="primary" round>丸いボタン</el-button>
  <el-button type="primary" サークルアイコン="el-icon-search"></el-button>

4. ボタンのステータス

ボタンの状態は実際には HTML 標準の機能であり、disabled を使用して無効にすることができます。

ボタンの状態:

<el-button type="primary">通常</el-button>
<el-button type="primary" disabled>無効にする</el-button>

5. ボタンのグループ化

ボタンのグループ化は非常に便利です。たとえば、よく使われるページングボタンはグループ化すると見栄えが良くなります。これは、ボタンを <el-button-group> で囲むことで実現できます。

ボタンのグループ化:

  <el-ボタングループ>
   <el-button type="primary" icon="el-icon-arrow-left">前のページ</el-button>
   <el-button type="primary">次のページ<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>

6. ボタンのサイズ

Hungry は、デフォルト、中、小、極小の 4 つのサイズを提供します。コードは次のとおりです。

ボタンサイズ:

<el-button>デフォルト</el-button>
<el-button type="primary" size="medium">中</el-button>
<el-button type="primary" size="small">小さい</el-button>
<el-button type="primary" size="mini">ミニ</el-button>

7. まとめ

el-button が提供する機能はすでにかなり充実しているので、そのまま使用できます。デフォルトのスタイルを変更するために独自のスタイルを定義することは、外観の不一致につながる可能性があるため、推奨されません。

Element el-button ボタンコンポーネントの詳しい使い方については、これで終わりです。Element el-button ボタンコンポーネントの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: