I'm looking for a way to dynamically add bordered property to the button element, how can I do that?
So I need to switch from <Button> to <Button bordered>. Any way to do this without assigning an entire <Button><Text>I'm a button</Text></Button> to a variable, then duplicating the same but with bordered?
You can use true or false based on your selection. Store its value in state and when you do some operation set it to true. This is how your Button will look.
<Button bordered={this.state.isBordered}><Text>I'm a button</Text></Button>
whenever you want to change its value just use setState and it's done
this.setState({
isBordered:true
})
Update:
Combine it with transparent parameter and it will work
<Button transparent bordered={this.state.isBordered}><Text>I'm a button</Text></Button>
Related
I m currently using the slider from react-native-community and i am having trouble doing more than one thing while using onValueChange.
now the value taken from onValueChange is set to control the strokeDashOffset (sdo) of an SVG element. It is working just fine but i need to add some more rendering depending on the slider value. That's to say for example when the value reaches 340 i need to setState something, then when it reaches 650 i need to set some other state etc...
here is the code of my slider :
<Slider style={styles.slider}
minimumValue={0}
maximumValue={1570}
value={sdo}
step={1}
onValueChange = {value => setSdo(value)}
/>
(in my svg component the strokeDashOffset is set to this sdo value but i don't feel like putting my svg code is relevant here, I guess i have to add some stuff in the onValueChange but i cannot use if statements and i have no idea how to proceed)
How can i conditionally render things based on the slider value (while stille having the slider value attached to strokeDashOffset of my SVG)?
thanks in advance !
I'm fairly new to vuetify and vue in general. The problem I'm facing is that when I click on a datepicker, the calendar pops up and when I tab out, the cursor moves to the next input field but the calendar does not close.
I want it to close automatically on tab out.
I tried setting close-on-content-click="true" instead of false but to no avail. I'm not sure what else to try.
Here is a codepen I found vuetify documentation that has similar implementation and behavior as my application. codepen
Thank you for any inputs.
add this #keydown.tab='menu1 = false' in v-text-field
close-on-content-click is for mouse clicks and does not apply to keyboard actions. You need to explicitly toggle the v-menu model when the input loses focus.
To close the menu when whenever the input field loses focus I would attach the toggle to the blur event. You can do this by replacing the #blur listener to a method, in which you will set the menu model to false.
<v-text-field
v-model="dateFormatted"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
#blur="updateDate"
v-on="on"
/>
updateDate(event) {
// This is the same value as dateFormatted,
// you don't need to say this.dateFormatted like in your codepen.
const value = event.target.value;
this.date = this.parseDate(value);
this.menu1 = false;
}
"Destructuring" is JS good practice instead of randomly named variables or verbosity so I would write the first line as:
const { value } = event.target;
If you were passing additional variables into updateDate method you would need to write it as updateDate($event, variable) but if not, $event as first parameter is a given.
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
I am looking for a solution to disable the labels in the input components so that they never render.
The label attribute of the TextInput component can take either a string or a boolean value: label={false}.
In the component this is SelectInput, this also works, but there will be an error in the console, therefore, you can do this: label=""
i referred to the official appcelerator site and implemented the Text Field where i have set the "focusable" property to true and have added the key pressed event but it is not working.Kindly provide the solution in detail?
index.xml:
<Text Field id="txt_field" focusable = true/>
index.js:
$.txt_field.addEventListener('keypressed',function({
*********my code***********
});
First, there seems to be a space in your xml, not sure if that is a typo. It should be this:
<TextField id="txt_field" focusable="true" />
Next, the keypressed event only works with hardware keys. If you just want to know a new character was typed, you should use the change event.
Best practice is to also add the event listeners to the xml, and don't add them in javascript
<TextField id="txt_field" focusable="true" onChange="changeTextField" />
Then you'll need to create a changeTextField function in your controller:
function changeTextField(e) {
// the textfield will be in e.source
// the new value of the textfield will be in e.value
}
based on that, you can check e.value and see what has changed as opposed to the last change.