I have a prime vue menubar with 3 tabs that align to the left
HTML
<Menubar :model="items" />
.vue file
export default {
data() {
return {
items: [
{
label:'Users',
icon:'pi pi-fw pi-user',
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
},
{
label:'Settings',
icon:'pi pi-fw pi-cog'
}
]
}
}
}
I want to move the settings tab to the right how would I do this? I tried adding to below the settings label. There is no examples in the docs
style:{'margin-right': 'auto'}
I know it's a bit late, but just faced this problem today.
One way of doing it would be to set some CSS styles to modify the original .p-menubar-button and .p-menubar-root-list:
.p-menubar-root-list, .p-menubar-button {
position: absolute;
right: 0;
}
This will force the items to be on the rigth. But be careful because it does not work if you are using the end template (or at least for the quick test I did, it was not working).
You could't use the templating option:
<Menubar :model="items">
<template #end>
Settings
</template>
</Menubar>
And remove 'settings' from items but then you have to build the way you like.
Maybe a Button which opens a Menu on click
Related
How can we use custom percentage on padding in Tailwind CSS?
My config:
theme: {
extend: {
spacing: {
'80\%': '80%', // p-80% - doesn't work
}
},
},
We can achieve that in the old way with the plain CSS:
.p-80\% {
padding: 80%;
}
But ideally, we can do it with Tailwind too.
Any ideas?
While the other answers do provide an answer, this can be frustrating if you only need to use the custom value once. I found this answer when trying to solve such an issue, so for those who find this after me, tailwind now supports arbitrary values.
You can use them by appending square brackets containing a CSS value (e.g. [80%]) to a prefix such as p- for padding or mr- for margin-right.
<div class="p-[80%]">
Hello world!
</div>
You don't need to escape the percent sign for Tailwind, it will take care of that. Here's a play example https://play.tailwindcss.com/CYR6JOXYyz?file=config
theme: {
extend: {
spacing: {
'80%': '80%', // p-80% - should work
}
},
},
The class Tailwind will create is .p-80\% for the above config.
I found that using spacing to customize more than padding, margin, width, and height all at once
Code
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
padding: {
'p-80': '80%',
},
// Build your palette here
colors: {
'black': '#393939',
}
}
}
}
Markup
TailWindCSS Dev
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"
I've noticed that :hover in Tailwindcss uses the defaults hover selector which causes 'stuck' hover states on mobile. Is there a way to modify the :hover function to do a #media(hover:hover) instead?
update: There is now a better way. See this answer by Javier Gonzalez
original:
By far the simplest way is to add your own #media rule to the #responsive-class of rules in tailwind. How you can do that is described in the official tailwind documentation under the topic of custom media queries.
Simply add this to your config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'hover-hover': {'raw': '(hover: hover)'},
}
}
}
}
This translates to #media (hover: hover) { ... } in css. And voila, you could use hover-hover:text-red to display red text only for devices that have hover ability.
To make your own, leave 'raw' as is and change the other two attributes to whatever media query you want. The first attribute hover-hover is what you use in tailwind. The second (hover: hover) is what your actual css #media query looks like. E.g.: hover: none or pointer: coarse.
Now, go ahead and use hover-hover:hover:text-red to modify your hover states.
Might be a bit late but the Tailwind team is already addressing this issue in Tailwind version 3 using a feature flag: https://github.com/tailwindlabs/tailwindcss/pull/8394
Once a new version is published with these changes Starting on tailwindcss v3.1.0, you could include a feature flag in your configuration to look like:
// tailwind.config.js
module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
// ...
}
Yes, just generate the hover variant using a plugin that, besides adding the :hover pseudo-selector, also wraps all of the rules inside an #media(hover:hover) rule:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const hoverPlugin = plugin(function({ addVariant, e, postcss }) {
addVariant('hover', ({ container, separator }) => {
const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
hoverRule.append(container.nodes);
container.append(hoverRule);
hoverRule.walkRules(rule => {
rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`
});
});
});
module.exports = {
plugins: [ hoverPlugin ],
}
The responsive attributes like sm: md: lg: will do those media query job for you. Refer example in the docs. If you dont want to use hover state in mobile device. specify with eg:- sm:hover:no-underline
You can easily create your own hover like below:
// styles.css
#variants hover {
.banana {
color: yellow;
}
}
Then use it like class='hover:banana'
Using arbitrary variants
<button
type="button"
class="
[#media(hover:hover)]:opacity-0
[#media(hover:hover){&:hover}]:opacity-100
">
<!-- ... -->
</button>
I am trying to build a SPFx webpart containing a ChoiceGroup. When I set the css style to ms-sm12 the choices are aligned vertical:
Show assigned to:
o anyone
* me
o nobody
I like them to align horizontal in one row:
Show assigned to: o anyone * me o nobody
When I set the style to ms-sm6, it aligns them "mixed":
The Slider and Toggle are set to ms-sm3
Show assigned to: o anyone
* me
o nobody
With ms-sm4 it looks like:
With ms-sm3, ms-sm2, ms-sm1 it looks like (the title getting more and more squashed and all options in one column:
How can I force / encourage the options to be rendered horizontal?
Follow the steps given below :
1) Create New .scss file
ex: fabric.scss and paste this class in it.
.inlineflex .ms-ChoiceField{
display: inline-block;
}
2) In your component give refernece like:
import './fabric.scss';
3) Add component and apply class.
<ChoiceGroup
className="inlineflex"
label='Pick one icon'
options={ [
{
key: 'day',
text: 'Day'
},
{
key: 'week',
text: 'Week'
},
{
key: 'month',
text: 'Month'
}
] }
/>
Another option that doesn't require adding a CSS is to apply the style directly to the control:
set the flexContainer style to display:flex.
you will notice a space might be needed at the end of the options, I added a non-breaking space as \u00A0
<ChoiceGroup selectedKey={valueType}
styles={{ flexContainer: { display: "flex" } }} options={[
{ key: 'specific', text: 'selected\u00A0\u00A0' },
{ key: 'relative', text: 'relative' }]} />
done!
add styles property to ChoiceGroup styles={{ flexContainer: { display: "flex" } }}
add styles property to options styles: { choiceFieldWrapper: { display: 'inline-block', margin: '0 0 0 10px' }}
done!
const options: IChoiceGroupOption[] = [
{ key: 'conforme', text: 'Conforme'},
{ key: 'noConforme', text: 'No conforme', styles:{field: { marginLeft: "15px"}}}
];
<ChoiceGroup styles={{ flexContainer: { display: "flex" } }} options={options} />
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.