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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL スロークエリ pt-query-digest スロークエリログの分析
>>: Linux デスクトップ用の 4 つのスキャン ツール
画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...
実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...
Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...
1. 組み込み関数1. 数学関数ランド()丸め(数値) ceil(数値)階数(数値)ランダム丸め切り...
1. 基本仕様(1)InnoDBストレージエンジンを使用する必要があります。解釈:トランザクション、...
<iframe src="./ads_top_tian.html" all...
純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...
目次1. グローバルに登録されたコンポーネント2. グローバルカスタム指示vue 、新しいプラグイン...
目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...
問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...