Anpassen von Zurb Foundation 6 Schließen Sie die Schaltfläche

Question

Die Close Button 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 eine 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 bin ich irgendwie nicht bewusst seine Farbe ändert die ZURB Art und Weise, oder wo andere Ausschaltanimation Optionen finden als diese ich oben verwenden. 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 würde ich auch gerne den Knopf um den Hinweistext fest wickeln, nicht die ganze Linienbreite einnehmen. Ist das in jeder derbur-idiomatischen Art machbar?

Danke!

Answer 1

Um die Farbe der Schaltfläche zum Schließen oder andere Art zu ändern, können Sie die CSS wie

.close-button{ 
    color:red; 
} 

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

Die Animationen Sie benutzen können:

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

Answer 2

Sie die Legende auf eine Spalte hinzufügen 1 bis 12 breit (obwohl 12 breit ist, was Sie bereits mit dem Callout auf haben seine eigene). 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>