We have an Ionic 3 project where we made large modifications to the default header styling. Each ion-header element is assigned a class "big-header" that updates color, button layout, and header height. The styling is applied in the app.scss file.
The updates to the header styling appear to have a significant impact on performance. It also looks like the styling may be applied after the view loads. There is a brief "hiccup" where the old, default height is used.
Is there a "proper" way to modify the header that is a little more resource friendly?
For reference, here is the CSS being applied:
/* Header Overwrite */
ion-header.big-header {
border-bottom: none !important;
/*box-shadow: 0px 4px 17px rgba(0,0,0,0.30);*/
.bar-buttons-md[end] {
float:right;
padding-top:4px;
padding-right:4px;
}
ion-navbar.toolbar {
display:block;
}
ion-buttons, .bar-button-menutoggle {
display:inline-block;
width:50%;
margin:0px;
}
.toolbar-title-md {
font-size:36px !important;
padding-top:16px !important;
font-weight:normal !important;
overflow:visible !important;
}
.toolbar-md {
min-height: 112px;
.toolbar-background {
background-color: #019ae8 !important;
background: #019ae8 !important;
}
ion-icon {
display:block;
}
ion-icon:before {
color: #FFFFFF !important;
}
.bar-button-menutoggle {
padding-top:12px;
padding-left:12px;
text-align:left !important;
.button-inner {
display:block;
}
}
}
.header-note {
position: absolute;
bottom: 0px;
margin: 0px;
font-size: 10px;
width: 100%;
text-align: right;
padding-bottom: 5px;
padding-right: 8px;
color: white;
}
.big-header-descriptor {
display:none;
position: absolute;
top: 2px;
font-size: 14px;
text-transform:uppercase;
}
}
from Ionic3 - Proper Way To Style Headers
No comments:
Post a Comment