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

要素 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • el-button 要素で $attrs を使用する際の注意点の詳細な説明
  • element-ui の el-tree コンポーネントのレンダリング関数を使用して el-button サンプルコードを生成します。
  • element-ui の el-button コンポーネントにカスタムの色とアイコンを追加する方法

<<:  MySQL スロークエリ pt-query-digest スロークエリログの分析

>>:  Linux デスクトップ用の 4 つのスキャン ツール

推薦する

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...

axiosリクエストをvueでカプセル化する方法

実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

MySQL: MySQL 関数

1. 組み込み関数1. 数学関数ランド()丸め(数値) ceil(数値)階数(数値)ランダム丸め切り...

MySQL 30軍事ルールの詳細な説明

1. 基本仕様(1)InnoDBストレージエンジンを使用する必要があります。解釈:トランザクション、...

iframeを透明にするパラメータ

<iframe src="./ads_top_tian.html" all...

純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)

純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...

JSでHTML本文のスタイルを変更する

目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

Vueのインストール方法の紹介

目次1. グローバルに登録されたコンポーネント2. グローバルカスタム指示vue 、新しいプラグイン...

MySQL ロール関数の紹介

目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

Vue3.0でカスタム命令を書くための簡単な手順

序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...

Mysql を 5.7 にアップグレードした後のグループ クエリの問題を解決する

問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...