Is it possible to have Vuetify v-drawer open on large screen and open/close by the toolbar button on mobile screens?
Something like:
https://design.gitlab.com/brand/basics
Check this codesanbox I made: https://codesandbox.io/s/stack-70931919-gbrmr?file=/src/App.vue
This is a basic navigation drawer setup I made. Feel free to modify it to your needs and let me know if you need help with that!
#cmfc31's solution is great, but unfortunately it doesn't work with Vuetify 3 anymore.
Here's how you can have your nav drawer open by default on large screens with Vuetify 3:
<script setup>
import { ref } from 'vue'
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const navDrawerIsOpen = ref(!mobile.value)
</script>
<template>
<v-navigation-drawer
v-model="navDrawerIsOpen"
>
<!-- nav drawer contents here -->
</v-navigation-drawer>
</template>
For opening/closing the nav drawer mobile screens, you can use the usual open/close button in an app bar or any other way you like to toggle the value of navDrawerIsOpen between true and false.
You can also de-structure breakpoints from useDisplay() as we know them from Vuetify 2 (e.g. smAndUp) but I find the use of mobile.value the most elegant way to solve this specific problem.
You will find more about breakpoints in Vuetify 3 here: https://next.vuetifyjs.com/en/features/display-and-platform/
Related
I have started a new app using React and react-bootstrap. There is only one component outside the App.js file. The contents:
import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';
const accordionDemo = (props) => (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Card one
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Body of Card One.</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Card two
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Body of Card Two.</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
export default accordionDemo;
This results in a button and text displaying for each card in the code. The buttons don't do anything except create a warning in the console: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.
A warning should break, right?
is this a react-bootstrap wide problem? Or perhaps Boottstrap?
Do I need to manually import some CSS? I thought The react components would come with that styling already.
So I was foolish. I did not have the bootstrap scss imported into my main scss file. And... that was everything.
The answer, therefore, is yes, you DO need to import CSS separately when using react-bootstrap -- as per https://react-bootstrap.github.io/getting-started/introduction/
In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item
// item
// Description
// Define a custom item appearance
// Props
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}
How can I achive that? because when I do
<template v-slot:item="data">
<book :book="data.item"></book>
</template>
Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items
It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.
As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:
Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
it gives users the slots to add custom markup/components inside the v-list-items
That is why there is no way of avoiding the v-list component.
I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW
If you are having some problems with styling your book component please tell me. I am sure I can help you with it.
I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:
<template v-slot:item="{item, on, attrs}">
<v-list-item
v-bind="attrs"
v-on="on"
>
<v-list-item-avatar>
<v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
Existing questions on this subject refer to how to use Angular with FontAwesome Icons and the Answer is ideally Angular FontAwesome. I searched both repo's and didn't really find much using angular-fontawesome. There are hints of older solutions only.
So I have that. I am also using Angular Material Buttons, to which I have been tasked with using FontAwesome Icons in my Buttons and this leads me to Material Icons
I am not really sure where to begin.
Providing I have added an Icon to angular-fontawesome as described. I have a Button with a Icon ready to go, there is a standard method to use to connect the two?
TLDR: I want to use a Material Icon Button, but I am unable to use a Material Icon and have to use FontAwesome Icons instead. I don't know how to achieve this.
Approach 1: Material icon registry
Material allows to use custom SVG icons with its components (like mat-button). FontAwesome icons are also SVGs, so you can use this mechanism to solve task at hand.
// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
import { icon } from '#fortawesome/fontawesome-svg-core';
// 4. Use with `mat-icon` component in your template
#Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
// 2. Render icon into SVG string
const svg = icon(faFontAwesomeFlag).html.join('');
// 3. Register custom SVG icon in `MatIconRegistry`
registry.addSvgIconLiteral(
'font-awesome',
sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
Also check this issue for description of a more lightweight implementation.
Approach 2: Use fa-icon component from angular-fontawesome library
As you already seem to use #fortawesome/angular-fontawesome package in your application, you can avoid using mat-icon altogether and use fa-icon inside mat-button instead.
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
#Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
faFontAwesomeFlag = faFontAwesomeFlag;
}
Note that you'll also need to add FontAwesomeModule to imports for this to work. See documentation for more details.
Here is the demo with both described approaches: https://stackblitz.com/edit/components-issue-8znrc5
Note that I also had to add some CSS to ensure that icon is aligned well with the button text.
Go to your project directory and run this command to install google material icons pack
npm add material-design-icons.
Next, update the “.angular-cli.json” file to include the web font into the “index.html” page when application gets compiled:
{
styles: [
"./assets/fonts/material-icons/material-icons.css"
]
}
Finally, you can test the font by updating the main application template with something like the following:
<h1>Material Icons</h1>
<i class="material-icons">account_circle</i>
<i class="material-icons">thumb_up</i>
You can refer to this site . I followed all the steps fro this site to use mat-icons when I was creating angular 6 project.
More
You can also checkout this stackblitz
Update
If you want to use font awesome icons I suggest you can start by following this guide . It's super easy and simple to use.
Install font-awesome dependency using the command npm install --save font-awesome angular-font-awesome.
After that import the module :
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.
I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?
The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.
<Button primary label="users-permissions.Auth.form.button.login" type="submit" />
But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.
I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.:
How can I override Bootstrap CSS styles?
But strapis SCSS seems to something different I obviously don't understand yet.
If anyone has an idea or did already overrides to e.g. primary button - please let me know.
Thanks in advance, Stef.
You have two ways to override the default style of a button
You can pass a style prop to the component
<Button label="Label" type="button" style={{ background: 'red' }} />
You can pass a custom className prop:
In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)
.customButton {
background: red;
}
Then in your index.js file
import Button from 'components/Button';
import styles from './styles.scss';
render() {
return (
<Button label="label" className={styles.customButton} />
);
}
Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished?
https://codepen.io/anon/pen/qKNNLw
<v-dialog v-model="dialog" persistent max-width="200">
<v-btn slot="activator">Open</v-btn>
<v-card>
<v-card-text>Thank you!</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Vuejs describes some Javascript callbacks here: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
Is it possible to use them somehow?
My first idea was to set the dialog transition attribute to false and wrap it with a custom transition but this does not seem to work (disabling transition works but adding my own did not), maybe due to the underlying structure generated by Vuetify.
Background: I render a Google map inside the dialog that needs to resize after reaching full size.
This issue is being treated in v1.2.x milestone of Vuetify :
Heres the issue
You may consider recreating the modal wrapping it with the proper vuejs hooks as well.