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 つのスキャン ツール
Linuxでタイムゾーンを変更する場合、常に変更することはできませんAsia/Shanghai に変...
最近コンピュータを再インストールした後、最新バージョンのみをインストールするという強迫観念に基づいて...
序文最近、仕事で問題が発生しました。 Centos7 システムでは MySQL にリモート接続できな...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...
ドメイン名に続くパスがデフォルトの Web ディレクトリではなく、ローカル ディスク上の他のディレク...
無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...
関連記事:ユーザーエクスペリエンスのためのウェブサイトデザイン今朝、GMail がまた不調になり、接...
1.VirtualBoxソフトウェアをダウンロードしてインストールするまず、VirtualBox の...
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
数日前、私のウェブサイトがいくつかの IP アドレスから大量の悪意のある標的型スキャンを受け、ブルー...
1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...
目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...
目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...