2016-11-17 14 views
1

Я новичок в кроссплатформенном dev. Борьба с изменением размера FAB. Это то, что я сейчас:ionic: как изменить размер значка FAB

<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; 
} 

Но размер остается прежним. Как получить доступ к атрибуту кнопки? Я пробовал id, имя, #name,: before - не работал.

ответ

1

Попробуйте использовать это:

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

Если вы используете mini атрибут можно изменить размер с этим:

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

Если изменить этот класс можно сделать кнопку FAB больше или меньше.

+0

Спасибо, это сработало! Теперь размер можно настроить, но позиция не находится в центре, по какой-то причине она сдвинулась вправо. В чем причина? – IntelligenceArtificial

+0

Можете ли вы дать мне html? btw ' это приведет к тому, что ваша кнопка будет выровнена по центру и внизу страницы, но если у вас есть '', у вас будет кнопка в нижнем углу –

+0

Да, я использовал центральную середину, потому что мне в основном нужен большой кликабельный круг в центре экрана. <Ион-разборного центр среднего> кнопка <иона-разборное мини><ионным значок имя = «Пуск»> Start – IntelligenceArtificial

5

Перейти в файл theme/variables.scss и переопределить переменную $fab-size так:

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

Это должен быть принятый ответ. –