/ / Wie wird die Schaltfläche "Zurb Foundation 6" angepasst? Close button - zub-foundation-6

So passen Sie die Schaltfläche "Zurb Foundation 6" an schließen Sie die Schaltfläche - zub-foundation-6

Das Schaltfläche schließen scheint eine gute Möglichkeit zu sein, einen Hinweis anzuzeigen, den der Benutzer wegklicken kann. Aber seine Verwendung bleibt für einen Neuling ziemlich schwer fassbar.

Ich habe eins auf einer Seite platziert:

   <div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>&times;</button>
<p>whatever notice text</p>
</div>

Aber jetzt weiß ich nicht, wie ich es ändern könntefärbe den Weg von Zurb, oder wo finde ich andere Optionen als die, die ich oben verwendet habe. Ich möchte, dass der Knopf z.B. als ein Erfolg von Zurb und ein Fade-Out-Effekt anstelle des verwirrend schnellen Slide-Out-Effekts. Wie gehe ich da vor?

Eigentlich möchte ich auch, dass der Button den Hinweistext eng umschlingt, nicht die ganze Zeilenbreite einnimmt. Ist das in jeder derbur-idiomatischen Art machbar?

Vielen Dank!

Antworten:

1 für die Antwort № 1

Um die Farbe der Schließen-Schaltfläche oder eines anderen Stils zu ändern, können Sie den CSS-Code wie folgt codieren

.close-button{
color:red;
}

Wenn Sie SASS verwenden, können Sie die Variablen anpassen. http://foundation.zurb.com/sites/docs/close-button.html#sass-reference

Die Animationen, die Sie verwenden können, sind:

slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw

http://foundation.zurb.com/sites/docs/motion-ui.html


0 für die Antwort № 2

Sie können das Callout einer Spalte 1 bis 12 hinzufügen(obwohl 12 breit ist, was Sie bereits mit dem Callout allein haben). Hier habe ich es zu einer 2 breiten Spalte hinzugefügt. Wenn Sie die Ausblendmethode entfernen, wird die Standardausblendung verwendet.

<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>&times;</button>
<p>whatever notice text</p>
</div>
</div>
</div>

Bildbeschreibung hier eingeben