Detaillierte Erklärung zur Verwendung der Element-el-button-Button-Komponente

1. Hintergrund

Schaltflächen werden sehr häufig verwendet und die Schaltflächenfunktionen von Element sind recht umfangreich und werden in diesem Artikel vorgestellt.

Schauen Sie sich zunächst das Wirkungsdiagramm der verschiedenen Schaltflächen an:

Bevor wir den Quellcode analysieren, werfen wir einen Blick auf die offizielle Dokumentation zur Verwendung der Schaltfläche:

2. Tastenklassifizierung

Die Klassifizierung von El-Button-Schaltflächen wird grundsätzlich anhand der Farbe unterschieden. Es gibt auch eine Textschaltfläche vom Typ „Text“. Da Textschaltflächen relativ klein sind, eignen sie sich besser für den Bedienleistenteil jeder Tabellenzeile.

Schaltflächenkategorien:

  <el-button>Standard</el-button>
  <el-button type="primary">primär</el-button>
  <el-button type="success">Erfolg</el-button>
  <el-button type="info">Informationen</el-button>
  <el-button type="warning">Warnung</el-button>
  <el-button type="danger">Gefahr</el-button>
  <el-button type="text">Text</el-button>

3. Schaltflächenstil

Element bietet einfache Schaltflächen, abgerundete Schaltflächen und runde Schaltflächen. Es ist zu beachten, dass runde Schaltflächen normalerweise nur ein Symbol enthalten. Der Code lautet wie folgt:

Knopfstil:

  <el-button type="primary" plain>Einfache Schaltfläche</el-button>
  <el-button type="primary" round>Abgerundeter Knopf</el-button>
  <el-button Typ="primary" Kreissymbol="el-icon-search"></el-button>

4. Schaltflächenstatus

Der Schaltflächenstatus ist eigentlich eine Funktion des HTML-Standards, die mit „disabled“ deaktiviert werden kann.

Schaltflächenzustände:

<el-button type="primary">Normal</el-button>
<el-button type="primary" disabled>Deaktivieren</el-button>

5. Schaltflächengruppierung

Die Gruppierung von Schaltflächen ist sehr nützlich. Beispielsweise sehen allgemeine Paging-Schaltflächen besser aus, wenn sie gruppiert sind. Dies kann erreicht werden, indem die Schaltflächen mit <el-button-group> umschlossen werden.

Schaltflächengruppierung:

  <el-button-gruppe>
   <el-button type="primary" icon="el-icon-arrow-left">Vorherige Seite</el-button>
   <el-button type="primary">Nächste Seite<i class="el-icon-arrow-right el-icon--right"></i></el-button>
  </el-button-group>

6. Knopfgröße

Hungry bietet vier Größen: Standard, mittel, klein und sehr klein. Der Code lautet wie folgt:

Knopfgröße:

<el-button>Standard</el-button>
<el-button type="primary" size="medium">mittel</el-button>
<el-button Typ="primary" Größe="small">klein</el-button>
<el-button Typ="primär" Größe="mini">mini</el-button>

7. Zusammenfassung

Die von el-button bereitgestellten Funktionen sind bereits ziemlich vollständig, sodass Sie diese einfach verwenden können. Beachten Sie, dass es nicht empfohlen wird, einen eigenen Stil zu definieren, um den Standardstil zu ändern, da dies leicht zu einem inkonsistenten Erscheinungsbild führen kann.

Dies ist das Ende dieses Artikels über die detaillierte Verwendung der Schaltflächenkomponente Element el-button. Weitere verwandte Inhalte zur Schaltflächenkomponente Element el-button finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!