I have a v-app-bar control, and I'm trying to add a logo/image to it.
Is there a standard approach in Veutify for adding a logo to the AppBar?
You can add a v-img component like this:
<v-app-bar color="light-blue lighten-3" app>
<v-img
class="mx-2"
src="https://i.imgur.com/qgGY4tB.png"
max-height="40"
max-width="40"
contain
></v-img>
<v-toolbar-title class="ml-2">
Page title
</v-toolbar-title>
</v-app-bar>
It's important to set a max-height and max-width, otherwise the image will overflow the nav vertically and push over the title horizontally. And also set contain to preserve the aspect ratio
Demo in CodePen
Note: If you're using Nuxt/Webpack, etc, you might need to build the image path with something like this: :src="require('~/assets/logo.png')"
Use v-avatar with a tile property set to true, just like this:
<v-avatar :tile="true">
<img :src="require('#/assets/logo.png')" alt="logo">
</v-avatar>
The full v-app-bar example:
<v-app-bar app light>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-avatar :tile="true">
<img :src="require('#/assets/logo.png')" alt="logo">
</v-avatar>
<v-toolbar-title>Header text</v-toolbar-title>
</v-app-bar>
Yon can juste use the <img> balise from native html to set your logo.
Then you can resize them with width or height property.
Related
I'm creating a page where I have a parent div which encapsulates multiple child divs from different components in a NextJs project.
I have a preview option where my customers can preview their changes in mobile and desktop view.
I'm able to switch to mobile view using iframe. I want to achieve this without using an iframe.
Even though I change the parent div max width, because the rest of components have sm md lg xl which are taking the values from the view port instead of the parent div I'm unable to solve it.
What should be the approach to solve this?
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to give an attribute to the last of them [&>div:last-child]:bg-blue-500 , if you want to make it responsive, max-md:[&>div:last-child]:bg-blue-500 you have to express. I have prepared a demo for you to make it more meaningful, you can check it from the link below. If you expand the preview screen on the right a little, you will see that the colors have disappeared. I hope it can solve your problem.
Demo Code
Not sure what you meant complelty
<div class="max-w-full sm:max-w-full md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
For small screen sizes
</div>
<div class="flex-sm-row sm:flex-row md:flex-col lg:flex-col xl:flex-col">
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
<div class="w-sm sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
This for 50% width
</div>
</div>
<div class="hidden sm:hidden md:block lg:block xl:block">
For large and extra-large screen sizes.
</div>
</div>
Media breakpoints allows you to change content appearance based on viewport size. Tailwind's media variants like md:, lg: etc based on them. In order to change content based on parent's size you should use CSS Container Queries. Be aware - they are not production ready - about 75% browser support (actual at December 2022)
Container queries allow us to look at a container size and apply styles to the contents based on the size of their container rather than the viewport or other device characteristics.
Tailwind has official plugin which may help you with it. Install it configure within tailwind.config.js
module.exports = {
plugins: [
require('#tailwindcss/container-queries'),
],
}
You need to add #container class to a parent container and use size modifiers on element you need like #md:bg-blue-500.
<div class="#container max-w-full resize-x overflow-auto">
<div class="p-16 #md:bg-blue-500 bg-amber-400">
Resize me
</div>
</div>
This way element should be yellow unless container size is bigger than 28rem and it will become blue no matter viewport size
Produced CSS is
#container (min-width: 28rem) {
.\#md\:bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
}
Check other modifiers here. Please note md:flex and #md:flex are different sizes which may confuse at first
#containers supports labels so you can name containers and specify different CSS for them. Let's say you have reusable component (common situation) you include within loop
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
</div>
So within #container/aside element your card will be red after #4xl (56rem) size, while within #container/primary - yellow after #3xl (48rem).
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
YELLOW
</div>
</div>
<div class="#container/aside">
<div class="#4xl/aside:bg-red-500 #3xl/primary:bg-yellow-500">
RED
</div>
</div>
As I said it's not production ready. The way you want to handle unsupported browsers is up to you. First one - use polyfill. Just add
<script src="https://cdn.jsdelivr.net/npm/container-query-polyfill#1/dist/container-query-polyfill.modern.js"></script>
and it should be enough. However read full docs to improve user experience. I didn't fully tested it myself so cannot guarantee it is 100% solution
Second way is to check does browser supports container queries or not. You can check it via JS
if (!("container" in document.documentElement.style)) {
console.log('No support')
// Do something in that case
}
Another way - via CSS #supports rule
#supports (container-type:inline-size) {
/** Container queries supported */
}
Tailwind has supports: variant for that needs so something like this would work
<div class="supports-[container-type:inline-size]:hidden">
Your browser does not support container queries
Maybe show iframe element as backup (?)
</div>
<div class="supports-[container-type:inline-size]:block hidden">
Here is my cool feature which will be hidden if browser does not supports container queries
</div>
I've created this demo playground without polyfill to check different cases depends on container and window size plus different types of container and browser support
A solution to this can be adding a w-screen to parent div.
Use w-screen to make an element span the entire width of the viewport.
Documentation
I have a Bootstrap Vue table with a pagination component underneath it. I've currently got it in a separate row in a single column but whilst it looks "fairly" centred, it's actually not centred in the column and there is uneven padding/margin on the right side. Looking like it's from the tag (per image).
How can I horizontally centre the pagination pls?
</b-table>
<b-row align-h="center" align-content="center">
<b-col cols="3">
<b-pagination
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
</b-col>
</b-row>
You could use cols="auto" instead of cols="3", that way the column will automatically size itself after the content, instead a specific width as you have now.
https://bootstrap-vue.org/docs/components/layout#variable-width-content
<b-row align-h="center" align-content="center">
<b-col cols="auto">
<b-pagination></b-pagination>
</b-col>
</b-row>
You could also use Bootstraps Flex Utilities
<div class="d-flex justify-content-center">
<b-pagination></b-pagination>
</div>
try adding justify-content: center; to your .pagination class
My Angular 8 app has a simple structure:
app.component.html:
<app-main-nav></app-main-nav>
<div id="main-container">
<router-outlet></router-outlet>
</div>
I would like the <app-main-nav> (which is like a conventional "left nav") to be 160px wide, and 100% of the viewport tall. The <div id="main-container"> should fill the rest of rest of the screen.
Ordinarily, I would make the entire page (body?) a flex container, and set the flex properties on the <app-main-nav> and <div id="main-container"> elements.
But, how to do I set the css properties of the <app-main-nav> component? How to I select it in app.component.css?
Just put in your app.component.css something like:
app-main-nav {
/*your css rules */
}
you could also select the component by id or class. Be aware that Angular components are inline by default so you may have to set it's display property to block or something like that.
I use the React Material UI with JSS. I have the following structure:
<footer>
<div className={classes.ContainerWrapper}>
<div className={classes.Container}>
<div>
<div className={classes.Text}>Text</div>
</div>
<Box marginLeft={6} className={classes.ButtonContainer}>
<Button className={classes.Button} variant="contained">
<Link to={...}>Link text</Link>
</Button>
</Box>
</div>
</div>
</footer>
The problem is that I want an SVG absolutely positioned compared to ContainerWrapper, partly behind the Container. My trials till now were:
Using z-index (did not work because of the absolute position)
Using negative z-index (did not work because the whole footer cannot have negative z-index, it has clickable elements)
Putting SVG in the :after pseudo element as a background image.
When I tried the last one, I run into the following obstacles:
This import throws an error:
import image from '../../assets/images/image.svg'; It works perfectly with png, btw.
Finally, I tried to use inline SVG as follows:
backgroundImage: `url("data:image/svg+xml,%3Csvg...")`
The after pseudo part appears in the DOM in the proper size. However, I cannot see the image.
Thanks in advance!
this is a part of my project : app
I want the header be fixed in scrolling and I added bootstrap fixed-top class to my header in header.component.html file. but when I change the mode of my sidenav to side the header doesn't change and be pushed to left.
how can I fix this problem?
You don't need to used bootstrap's fixed-top - you just need to place your header in the right place. For your 'side' mode, the header needs to be inside the sidenav content so that it is pushed along with the content. For 'over' mode, the header needs to be above and outside the sidenav altogether. You can do this using template logic:
<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>
<mat-sidenav-container class="theme-sidenav-container" autosize>
<mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
...
</mat-sidenav>
<mat-sidenav-content class="theme-main-content">
<ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
<ng-template #appHeader>
<app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>
Here it is on StackBlitz. Note that I also removed the fixed-top class and defined defaults for mode and pushed.
This may not be exactly what you want, but it shows you how to dynamically change the header position. You may need to add layout to app-sidenav and the theme-main-content class.