I am trying to disable a Lighting Aura button component using ternary operator but it doesn't seems to work, I would really appreciate If someone can explain the reason or point me to any documentation which I can refer.
Thanks you
<lightning:button variant="neutral" label="OK" title="OK" disabled= "{! 1==true?true:false}" onclick="{!c.transferCall}"/>
<lightning:button variant="neutral" label="OK" title="OK" disabled= "{! 0==true?true:false}" onclick="{!c.transferCall}"/>
Related
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
I have created a Checkbox group in ant-design with react JS. Now, I want to use Buttons, Instead of checkboxes there. One button per one value.
Here is my code.
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Checkbox value={symptom.id}>
symptom.nameEnglish
</Checkbox>
</li>
);
})}
</ul>
</Checkbox.Group>
And here it looks like
What I want is to add buttons, instead of checkboxes. The below image shows that.
And the code that I used is,
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Button value={symptom.id}>
symptom.nameEnglish
</Button>
</li>
);
})}
</ul>
</Checkbox.Group>
But this doesn't work as checkboxes. Any idea for fixing this?
Thanks in advance
This is my creation.
You can check only one or uncheck all.
And I provided simple CSS that looks like Radio.Button.
https://stackblitz.com/edit/react-bsyhkm?file=index.js
I created new version with vertical and width option as you want.
https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js
Not sure if you are still searching, but I had the same issue and found a really good example on the sandbox here.
It doesn't actually use any antd library, but I think it looks pretty similar, and tweaking it a bit more to appear consistent with the rest of the UI should be pretty trivial.
May be you can try,
On button click event change the state (state = !initialstate)(ie. reverse initialstate), set initialstate to false. and then set values of checkbox based on state of button.
I am trying to make "required" a TextField in select mode.
I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.
Please check this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
UPDATE: (Clarification really)
I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".
Material Ui provides another component Native Select to handle this kind of native validation.
Please check this example
It was recently implemented in material ui. If you upgrade #material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402
It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.
Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.
I am using this to create a checkbox group:
https://github.com/ziad-saab/react-checkbox-group
I need to disable the first checkbox generated.
Does anyone know the props to do it?
I have tried:
<label><Checkbox value={i} disabled /> {passo.title}</label>
<label><Checkbox value={i} disabled={true} /> {passo.title}</label>
<label><Checkbox value={i} disabled=true /> {passo.title}</label>
i am guessing you want to check and disable the checkbox at the same time. It can be done by passing the values to be checked as an array to the value property of CheckboxGroup component as follows
<CheckboxGroup name="passos" value={[0,1]} onChange={this.passosChanged}>
I've used a value of {[0,1]} for example . And as statated before you can pass disabled to your <Checkbox> component. Attaching CodeSample link below.
https://codesandbox.io/s/kwy7x46mjr
In case i have missed something , kindly clarify more !
Using Monaca/Onsen-UI - but struggle to understand the syntax of an input box whereby I want an icon placed in the [placeholder].
The following example from [] works, showing an 'email' type icon - which is clearly the result of [], but I don't understand to what that relates. Generally for OnsenUI i'd use a <i> (etc).
Can someone please explain to what the [] that refers and how I find out what the icon I want to use is...?
SAMPLE:
<input type="text" class="text-input--underbar" placeholder=" Notes" value="">
 - it is ASCII code of some icon from FontAwesome font. You may use this list to find symbol you need HERE.