Foundation-Schaltflächengruppe

Button-Gruppe

Foundation kann eine Reihe von Schaltflächen in derselben Zeile erstellen.

Sie können<ul>Element und fügen Sie hinzu.button-groupKlasse zum Erstellen einer Schaltflächengruppe:

Beispiel

<ul class="button-group">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Selbst ausprobieren »

vertikale Button-Gruppe

Vertikale Button-Gruppen verwenden.stackKlasse zum Erstellen. Beachten Sie, dass die Buttons die gesamte Breite des übergeordneten Elements einnehmen:

Beispiel

<ul class="button-group stack">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Selbst ausprobieren »

.stack-for-smallKlasse wird für kleine Bildschirme verwendet, wodurch die Buttons von einer horizontalen Anordnung zu einer vertikalen Anordnung wechseln:

Beispiel

<ul class="button-group stack-for-small">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Selbst ausprobieren »

abgerundete Button-Gruppe

Verwendung in Button-Gruppe.radiusund.roundKlasse zum Hinzufügen von abgerundeten Eckeneffekten zu Buttons:

Beispiel

<ul class="button-group radius">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

<ul class="button-group round">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

Selbst ausprobieren »

Gleichmäßig gestreckte Button-Gruppe

.even-numclass wird verwendet, um die Breite von Buttons in einer Button-Gruppe gleichmäßig zu verteilen und 100% der Breite des übergeordneten Elements einzunehmen.

numFür die Anzahl der Buttons in der Button-Gruppe, von 1 bis 8:

Beispiel

<ul class="button-group even-3">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
</ul>

<ul class="button-group even-5">
  <li><button type="button" class="button">Apple</button></li>
  <li><button type="button" class="button">Samsung</button></li>
  <li><button type="button" class="button">Sony</button></li>
  <li><button type="button" class="button">HTC</button></li>
  <li><button type="button" class="button">Huawei</button></li>
</ul>

<ul class="button-group even-8">
  <li><button type="button" class="button">A</button></li>
  <li><button type="button" class="button">B</button></li>
  <li><button type="button" class="button">C</button></li>
  <li><button type="button" class="button">D</button></li>
  <li><button type="button" class="button">E</button></li>
  <li><button type="button" class="button">F</button></li>
  <li><button type="button" class="button">G</button></li>
  <li><button type="button" class="button">H</button></li>
</ul>

Selbst ausprobieren »

Dropdown-Menü-Button

Dropdown-Menü-Buttons ermöglichen Benutzern die Auswahl voreingestellter Werte:

Beispiel

<!-- Das Dropdown auslösen -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown-Button</a>

<!-- Das eigentliche Dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Foundation JS initialisieren -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Selbst ausprobieren »

Beispielanalyse

.dropdownKlasse zum Erstellen eines Dropdown-Menü-Buttons.

verwenden mitdata-dropdown="id"Die Schaltfläche oder der Link mit dem Attribut öffnet das Dropdown-Menü.

idDer Wert muss mit dem Inhalt des Dropdown-Menüs übereinstimmen (id01).

In<ul>Hinzufügen zu.f-dropdownKlasse unddata-dropdown-contentAttribut zum Erstellen des Inhalts des Dropdown-Menüs.

Zum Schluss initialisieren Sie Foundation JS.

Split-Button

Wir können auch ein Split-Button-Dropdown-Menü erstellen. Fügen Sie einfach im Button.splitclass hinzu und verwenden Sie ein span-Element, um einen Richtungspfeil-Button zu erstellen:

Beispiel

<button class="button split">Split-Button
  <span data-dropdown="id01"></span>
</button>

<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Foundation JS initialisieren -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Selbst ausprobieren »
Weitere Erweiterungen