Little question:
<file-pond
name="customImage"
ref="pond"
label-idle="Déposez votre image ici"
:allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
server="http://localhost:3000'"
:files="custom.customImage"
#init="handleFilePondInit"
/>
Is it possible to dynamically set the server value ?
For example :
v-server="apiUrl+'/api/v1/upload'"
Try this one
:server="`${apiUrl}/api/v1/upload`"
I'm using :server but it can be written as v-bind:server and ES6 Template literals for some better looking interpolation.
Related
I am using Select from native-base and I'm having problem with trying to customize the selectable options from Select.Item.
react-native: 0.70.5,
native-base": "^3.4.25
<Select>
<Select.Item value="one" label="one" />
</Select>
where it will only render the label, which expects a string. I am not able to render any other component from Select.Item
what I'm trying to achieve looks a lot like the picture below:
Desired Select.Item
Edit: not a solution as it breaks the component value. You have to use leftIcon and rightIcon properties instead
You can use the label attribute to customize the item content.
Something like:
<Select>
<Select.Item
value="one"
label={
<Row>
<Icon as={MaterialCommunityIcons} name="information" />
<Text>one</Text>
</Row>
}
/>
</Select>
In my opinion, the attribute name is misleading. You can also use leftIcon and rightIcon properties on Select.Item. If you can't achieve the customization level you want with these, I'm afraid you will have to create your own Select component based on ActionSheet elements.
Note that this will not be web compatible, so if you need web support it won't be an option. I'm also not sure to which extent other components are supported within this item element.
I load some images like this in my template:
<img
v-if="idRobot === 7"
src="~#/assets/img/faceTibot.png" />
But I'd like to load the asset dynamically. For example, something like this would be great:
<img
v-if="idRobot === 7"
:src="`~#/assets/img/${dynamicasset}.png`" />
Actually, when I do this, VueJS thinks I want to load the string "~#/assets/img/${dynamicasset}.png".
Is what I want even possible in VueJS3?
Ah, BTW I searched SO and found this but suggested require solutions don't work: https://stackoverflow.com/a/47480286/1098303
Thanks in advance
Have you tried this solution ?
<img :src="require(`~#/assets/img/${dynamicasset}.png`)" />
Given the following code:
<Trans i18nKey="error" ns="login">
<p className="error">
{React.string("Incorrect username/password combination.")}
<br />
{React.string("Is Caps Lock turned on?")}
</p>
</Trans>
Notice the React.string function calls.
Is there a way to make this work with i18next? What would this key's value look like in the JSON file?
Update
In my translations JSON file, how should the above code look?
"error": "<1>???</1>"
I'm not sure what is this React.string method, but the whole purpose of Trans is to integrate style tags in a text.
The text should be in the translation (json) file.
Your usage should look like:
<p className="error">
<Trans i18nKey="error" ns="login" />
</p>
{
"error": "Incorrect username/password combination.<br />Is Caps Lock turned on?"
}
BTW, for line break you can avoid Trans component, you can use white space and css, for more info read this answer: React i18n break lines in JSON String
In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
I wuld like to add the following style iwhich workss in html
<div style="text-decoration: line-through">
Now am trying this in vuejs2
<div :style="{'text-decoration: line-through':true}">
But the above doesnt work
Where am i going wrong?
Binding an object to the style attribute is done by providing key / value pairs.
I suspect what you want is
<div :style="{'text-decoration': condition ? 'line-through' : 'initial'}">