https://i.stack.imgur.com/SmV5U.jpg
How can I change the default navbar color in materialize show in the link Above. Please help
In .CSS file use:
nav {
background-color:#b71c1c ;
}
you can change the color by modifying the value of nav class
for example:
<nav class="nav blue darken-4">
or you can just edit the css file :) like this
nav {
background-color:#0d47a1;
}
Related
In my layout project I want to change layout color.
layout/default.vue
<v-app>
....
</v-ap>
I need to change v-app color, but this doesn't work:
<v-app color="secondary">
How can I do it?
note: I just want to use a Vuetify variable, like primary, secondary, accent, etc., and not CSS code.
i found it
in layout page i added this
#app {
background-color: var(--v-background-base) !important;
}
and in the nuxt config , in vuetify config
themes: {
light: {
background :'#eee'
},
dark :{
background :'#fff'
}
}
I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible
I have this hierarchy of v-dialog -> v-stepper -> v-select
<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>
https://codepen.io/amaieras/pen/VwWRzpL?editors=101
P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)
Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:
.v-stepper,
.v-stepper__wrapper,
.v-stepper__items {
overflow: visible;
}
You can visit this codepen too.
Because Modal has a fixed size.
And your v-select is almost at the bottom of modal.
If you move that field to top or middle, it will work for you.
Or you can make modal height larger than now.
Please add this css.
.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}
this will work for you.
In Ionic 1, we have the ability to define an <ion-nav-bar> above an <ion-nav-view>, which serves as a generic nav bar for the entire app and we could turn it off on a per-view basis (using ionNavView's hideNavBar=true|false.
It appears in Ionic 2 we have to insert an <ion-nav-bar> per page - and cannot have a global nav bar for the entire app. Is that correct, or am I missing a trick?
If so - it seems like a lot of duplicated code?
Also, it appears you do not have the ability for the NavBar to build its own back button, and you have to write the own mark-up for the back button yourself (per page) which, again, seems like a lot of code duplicate.
UPDATE:
Just like #mhartington says:
There is no way to create a global ion-navbar, as this is done on
purpose. The point of having a navbar defined for each component is so
that we can properly animate the titles, navbar background color (if
you change them) and animate other properties needed.
And about creating a custom directive to avoid duplicating ion-navbar html code:
That will still creat errors with how angular2 content projection
works. We have several issues that have been open when people try this
and the best answer is to not do it.
NOT recommended solution:
In order to avoid duplicating so much code, you can create your own custom component for the navbar.
Create a navbar.html with this code:
<ion-navbar *navbar>
<ion-title>MyApp</ion-title>
<button menuToggle="right" end>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons *ngIf="!hideCreateButton" end>
<button (click)="createNew()"><ion-icon name="add"></ion-icon></button>
</ion-buttons>
</ion-navbar>
And then in the navbar.ts:
import {Component, Input} from '#angular/core';
import {NavController} from 'ionic-angular';
import {CreateNewPage} from '../../pages/create-new/create-new';
#Component({
selector: 'navbar',
templateUrl: 'build/components/navbar/navbar.html',
inputs: ['hideCreateButton']
})
export class CustomNavbar {
public hideCreateButton: string;
constructor(private nav: NavController) {
}
createNew(): void {
this.nav.setRoot(CreateNewPage, {}, { animate: true, direction: 'forward' });
}
}
By declaring the hideCreateButton as an input of the Component, you can decide in which pages show that button and in which ones should not be visible. So in this way, you can send information to tell the component how it should be, and customize it for each page.
So if you want to add the navbar in a page (without modifying the default template, so showing the create button) you just have to add the navbar element (binded to our custom component by us in the selector property):
<navbar></navbar>
<ion-content>
...
</ion-content>
And if you want to hide the create button (or modify you navbar like you want to) your page will look like this one:
<navbar [hideCreateButton]="hidebutton()"></navbar>
<ion-content>
...
</ion-content>
And remember that the hideButton() should be defined in your customPage.ts like this:
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from '#angular/common';
#Component({
templateUrl: 'build/pages/create-new/create-new.html',
directives: [FORM_DIRECTIVES]
})
export class CreateNewPage{
private hideCreateButton: boolean = true;
public hidebutton(): boolean {
return this.hideCreateButton;
}
}
For ionic 3+
What I did to solve this was simply use a custom component.
ionic generate component navbar
Add the relevant navbar html to your component template
Add any other functionality to your component .ts file
Modify your selector to something relevant, (if used command above it
should just default to 'navbar'.
Also add the component to your app.module.ts declarations
Then in any of your page templates, simply use it as a custom element
e.g
<navbar></navbar>
<ion-content padding>
...
</ion-content/>
I had a similar issue creating an Ionic 4+ app (#ionic/angular 4.6.2), I wanted to add a login button and some other global stuffs in the header.
You can achieve that in a quite simple way.
Just add a ion-header containing a ion-toolbar in your app.component.html as a global header, like this:
<ion-header class="page-header">
<ion-toolbar id="main-toolbar">
<ion-title>
<ion-label>{{ pageTitle }}</ion-label>
</ion-title>
<!-- add here all the things you need in your header -->
</ion-toolbar>
</ion-header>
<ion-router-outlet id="content" main></ion-router-outlet>
The problem here is that the "global header" will overlay the content of any page if you do only that. So has a workaround just add an empty ion-header containing an empty ion-toolbar on top of all your pages before the content tag, as follow:
<ion-header>
<ion-toolbar></ion-toolbar>
</ion-header>
<ion-content>
<!-- your content here -->
</ion-content>
Doing that the "global header" will overlay the page header and the content will begin just after it.
Then you can manage all the code for your global header controls in your app.component.ts file.
I guess there could be some strange behaviour if the main header has a height greater than the "standard" toolbar height but with some nice CSS you should be able to fix it.
Furthermore, this workaround works fine with a side menu.
Hope it helps!
I have since found out this is not possible. The only way to achieve this is by providing an <ion-navbar> and that will handle the back button automatically.
E.g.:
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Settings</ion-title>
</ion-navbar>
<ion-content padding class="hub-settings">
<!-- content here -->
</ion-content>
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }
Need some help here please. I basically need a Navbar which hide the brand and removes the gap beside it when it's over its breakpoint - and to show the brand with the gap when it's under breakpoint. Any idea's please? - thanks in advance. :)
HTML is this within the Navbar toggle - only shows Brand title on small devices or collapsed:
<a class="navbar-brand visible-xs" href="#">Site Navigation</a>
CSS is this:
#media screen and ( min-width: 700px ) {
.navbar .container-fluid, .navbar-collapse {
padding-left:0;
}
.navbar-collapse.in {
padding-left:30px;
}
}
HTML is this within the Navbar toggle - only shows Brand title on small devices or collapsed:
<a class="navbar-brand visible-xs" href="#">Site Navigation</a>
CSS is this:
#media screen and ( min-width: 700px ) {
.navbar .container-fluid, .navbar-collapse {
padding-left:0;
}
.navbar-collapse.in {
padding-left:30px;
}
}
That should sort it. :)