I would like to put a CSS tooltip or QToolTip on a specific option in a Quasar option group (QOptionGroup), but I can't seem to figure out if this is even possible. I am using Quasar v2.0.0-beta7 with Vuejs3.
This sample is sort of how I imagined it would work (see option 1):
<q-option-group
color="secondary"
type="checkbox"
v-model="group"
:options="[
{ label: 'Option 1', value: 'op1', tooltip: 'I wish this would appear when you hover on option 1' },
{ label: 'Option 2', value: 'op2' },
{ label: 'Option 3', value: 'op3' }
]"
/>
Example here:
https://jsfiddle.net/98cw4bLs/1/
I tried to dig into the Quasar source code to see what QOptionGroup has in it, but couldn't really find it. Is there any way to do this? I feel like it defeats the purpose of using Quasar if I just end up making my own option group so I can have a tooltip.
I was able to find an answer in the Quasar forums. The QRadio component does what I wanted:
<q-radio v-model="group" :label="opt.label" color="secondary" v-for="opt in opts" :key="opt.label" :val="opt.value">
<q-tooltip v-if="opt.tooltip">
{{opt.tooltip}}
</q-tooltip>
</q-radio>
Related
I am trying to apply style to the selected mentions such that the mentions part looks different from the rest of the normal text.
I am using ANTD framework in my React application and using the mentions component from ANTD as shown below:
<Mentions
style={{ width: '100%' }}
onChange={onChange}
onSelect={onSelect}
defaultValue="#afc163"
options={[
{
value: 'afc163',
label: 'afc163',
},
{
value: 'zombieJ',
label: 'zombieJ',
},
]}
/>
The scenario is:
User types # and get list of mentions to select from.
Once the user selects the proper mention its value is shown in the text area with some styling applied to it.
What I tried: I tried applying style to the mentions component but it gets applied to the whole textbox content and not specifically the mentioned part.
I'm trying to use the steps to display several steps in a wizard.
My wizard steps works, but I can't manage to have the current steps highlighted properly in the steps list.
I was able to replicate in a small stackblitz: https://stackblitz.com/edit/angular-ivy-eujcl2?file=src%2Fapp%2Fsteps%2Fstep-two%2Fstep-two.component.html
When I run my code, I got basically this:
But in their demo, the current step gets highlighted:
Any idea what is going on? The styles are imported, I to bind an "activeIndex", but when I move, the step doesn't.
Your routes are not matching with what you have defined app route file vs what you have listed in wizard.component.ts, i.e.
// Your routes
{ path: 'step-1', component: StepOneComponent },
{ path: 'step-2', component: StepTwoComponent }
// But your step routeLinks
{
label: 'Step 1',
routerLink: '/setup/mongDb',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: '/setup/auth-token',
},
Once they match, the highlight starts working.
this.items = [
{
label: 'Step 1',
routerLink: 'step-1',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: 'step-2'
},
];
Demo
from what I see in your code, you don't use the proper routes.
The buttons trigger step-1 and step-2 but your step component is declared with /setup/mongDb and /setup/auth-token so I think the PrimeNg component doesn't see that you are on the declared path. I didn't look at the source code but I think this could be it.
This works:
let players = [
{ id: 1, name: 'Player 1', color: 'amber' },
{ id: 2, name: 'Player 2', color: 'sky' },
];
...
<span class="underline decoration-{player.color}-500">{player.name}</span>
Only sometimes. I can see the prop is applied to the class properly in the resulting HTML when inspecting the page source in the browser:
but the color is not applied to the underline most of the time. When I change the source HTML to a static color, save the file, and then change it back, one or both of the underlines stops working. Similarly, when I change a color in the javascript, usually the other color starts working, but not all of the time. Is this due to a race condition? Am I using Svelte wrong which might explain this seemingly random behaviour?
From this:
Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project.
What you should do:
<script>
let players = [
{ id: 1, name: 'Player 1', className: 'decoration-amber-500' },
{ id: 2, name: 'Player 2', className: 'decoration-sky-500' },
];
</script>
<span class="underline {player.className}">{player.name}</span>
i am have 2 forms, and in first form i am have button1:
Buttons[{
width: 350,
text: 'Book',
name:'button1'}]
on second form i am have button2, and when button click in second form, then button in first form disabled, before i am use id of button (id:'button1') and make this:
Ext.getCmp('button1').setDisabled(true);
but now i am remove ID and use name in components. But i am didn"t know how disable button1 by name!
Buttons don't have a name property - you should consult the documentation to see what configuration variables you have available to you. I'd instead assign it an itemId so you can make use of the up() and down() functions in order to easily find an item in the component hierarchy from an event handler.
Or if you want to find it directly you can use the following to lookup up the item:
{
text : 'Button',
itemId : 'buttonSelector'
}
var button = Ext.ComponentQuery.query('#buttonSelector');
if(button.length) button[0].disable();
Keep in mind that the ComponentQuery utility returns an array of items (even if you make your itemId unique). Here's a simple fiddle / demonstration.
In response to your comment, there may be confusion in regards to what the buttons config actually does - according to the docs it is shorthand for the following:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {minWidth: minButtonWidth},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Button 1' }
]
}]
... this creates an extra "step" in the hierarchy which you must account for in a query. For example, if your form had an itemId of formId you could try something like:
Ext.ComponentQuery.query('#formId toolbar #myButtonId')[0].disable();
I've updated your fiddle to demonstrate this.
I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.
You might want to have a look at this nice tutorial:
Add action buttons to floating sencha touch panels
the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.
Hope this helps.
There's no built-in config which meets your need, so you have to do it manually.
Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.
Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox
var box = Ext.create('Ext.MessageBox',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();
Hope it helps.