ionic: wie man die Größe des FAB-Symbols ändert

Ich bin neu bei Cross-Plattform-Dev. Schwierigkeiten mit der Änderung der Größe von FAB. Das ist, was ich habe jetzt:ionic: wie man die Größe des FAB-Symbols ändert

<ion-fab center middle> 
<button ion-fab color="blue" class="fabStartBtn"><ion-icon 
name="start">Start</ion-icon></button> 
</ion-fab> 

.fabStartBtn { 
font-size: 72px; 
}

Aber die Größe ist immer noch die gleiche. Wie kann ich auf das Button-Attribut zugreifen? Ich versuchte ID, Name, #name,: vorher - hat nicht funktioniert.

Quelle

2016-11-17 IntelligenceArtificial

Versuchen Sie, diese nutzen:

<ion-fab center bottom> 
    <button ion-fab mini><ion-icon name="add"></ion-icon></button> 
</ion-fab>

Wenn Sie das mini Verwendungs-Attribut können Sie die Größe mit dieser ändern:

.fab[mini] { 
    margin: 8px; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
}

Wenn Sie diese Klasse ändern können Sie die FAB-Taste größer machen oder kleiner.

Quelle

2016-11-17 14:57:33

Danke, es hat funktioniert! Die Größe kann jetzt angepasst werden, aber die Position befindet sich nicht in der Mitte, sie wurde aus irgendeinem Grund nach rechts verschoben. Was kann der Grund sein? – IntelligenceArtificial

kannst du mir den html geben? btw '' dies bringt deinen fab-Button in die Mitte und unten auf deiner Seite, aber wenn du ' hast, hast du den Button in der rechten unteren Ecke –

Ja, ich habe Mitte Mitte verwendet, weil ich im Grunde einen großen anklickbaren Kreis in der Mitte des Bildschirms brauche. – IntelligenceArtificial

Gehen Sie in Ihre theme/variables.scss Datei und überschreiben die $fab-size Variable wie folgt aus:

$fab-size: 70px; //Change value to whatever size you want

Quelle

2017-03-04 00:01:51 sampereless

Dies sollte die akzeptierte Antwort sein. –

ionic: wie man die Größe des FAB-Symbols ändert

Antwort

Verwandte Themen