Ионные 2 - Как стилизовать NavBar

СИТУАЦИЮ:Ионные 2 - Как стилизовать NavBar

Мне нужно, чтобы стиль Navbar моего приложения Ионные 2.

Я нашел противоречивую информацию.

кажется, прежде чем вы могли бы сделать что-то вроде этого:

<ion-navbar *navbar primary>

но не больше ..

В моем случае мне нужно дать фон и изменить цвет текста.

мне удалось стилизации цвет фона, изменив этот класс: toolbar-background

.toolbar-background { 

    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#00aaff), to(#009eb9)); 
    background-image: -webkit-linear-gradient(top, #00aaff, 0%, #009eb9, 100%); 
    background-image: -moz-linear-gradient(top, #00aaff 0%, #009eb9 100%); 
    background-image: linear-gradient(to bottom, #00aaff 0%, #009eb9 100%); 
    background-repeat: repeat-x; 

}

Но я не удалось изменить цвет текста.

Я пытался со следующими классами:

toolbar-text-color toolbar-active-color

CODEPEN:

https://codepen.io/johnnyfittizio/pen/xRXJWd

ВОПРОС:

Что правильный способ стилизации Navbar?

Боковой вопрос:

Лучше всего стиль его в app.scss право?

источник

2016-11-29 johnnyfittizio

Суммируя эти CSS элементы, которые нужно изменить, чтобы стилизовать Navbar:

toolbar-background -> для фона NavBar
toolbar-title -> по названию NavBar
bar-button -> для кнопок меню

Чтобы изменения были глобальными, я применил стиль в приложении .scss file

Если у вас есть обновления, отредактируйте это или сделайте новый ответ.

источник

2016-11-29 13:22:41 johnnyfittizio

.toolbar-background is the default class provided in inspect element

после попытки открыть этот класс и применить цвет

, например

.toolbar-background-md{ 
    background: gray; 
    } 
.toolbar-background-ios{ 
    background: gray; 
    }

обновление

обновить заголовок в навигационной панели

.toolbar-title-md{ 
     color: white; 
     font-family: roboto; 
    } 
.toolbar-title-ios{ 
     color: white; 
     font-family: roboto; 
    }

источник

2016-11-29 11:21:56

Спасибо за ответ. Как вы можете видеть, мне уже удалось создать цвет фона. Мне также нужно знать, как стилизовать цвет текста. И вообще неплохо было бы знать правильный способ стиля navbar в Ionic 2. – johnnyfittizio

, пожалуйста, проверьте обновленный ответ –

Использовать свойство «цвет». Если вы не изменить цвет полный aplicattion, а не необходимости изменить SCCS Ex:

<button ion-button color="danger" (click)="btn_logout()">Logout</button>

источник

2018-02-22 13:34:51

Ионные 2 - Как стилизовать NavBar

ответ

Смежные вопросы