要素 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 つのスキャン ツール

推薦する

Linux環境でタイムゾーンを設定できない問題を解決

Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...

MySQL 8.0.11 圧縮バージョンを Windows 10 にインストールするための詳細なチュートリアル

最近コンピュータを再インストールした後、最新バージョンのみをインストールするという強迫観念に基づいて...

CentOS7 で MySQL データベースにリモート接続できない理由と解決策

序文最近、仕事で問題が発生しました。 Centos7 システムでは MySQL にリモート接続できな...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

画像を表示したり非表示にしたりするための JavaScript

JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...

nginxディレクトリパスをリダイレクトする方法

ドメイン名に続くパスがデフォルトの Web ディレクトリではなく、ローカル ディスク上の他のディレク...

音楽プレーヤーアプリ(アプリケーションソフトウェア)の分析と再設計 美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...

全体的なユーザーエクスペリエンスを確保する方法

関連記事:ユーザーエクスペリエンスのためのウェブサイトデザイン今朝、GMail がまた不調になり、接...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...