I am using Atom to write a react-native application. Basically I need a snippet that expands to:
<TabBarIOS>
<TabBarIOS.Item>
</TabBarIOS.Item>
<TabBarIOS.Item
</TabBarIOS.Item>
</TabBarIOS>
if I try something like: TabBarIOS>TabBarIOS.Item*2 it uses the dot to add a className attribute, so it produces:
<TabBarIOS>
<TabBarIOS className="Item"></TabBarIOS>
<TabBarIOS className="Item"></TabBarIOS>
</TabBarIOS>
The official documentation includes syntax to escape "|" and "$" with "\", sadly that does not work for dots. Is there a way to escape that dot in order to get it included in the tag name?
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'm doing a test of an autocomplete component.
The problem is when I want to select an option from the dropdown, it shows me any option. When I did the test manually there are options but with cypress no. It worked and after no. I couldn't see the problem.
Does anyone know how to do it please?
(In cypress it didn't show any error)
Here the code of the autocomplete in js file
<Autocomplete
id={"name-label-" + label.customId}
options={options}
getOptionLabel={option => (option && option.name) ? option.name:''}
noOptionsText="No options"
renderInput={params => (
<TextField {...params} label="Select the name" fullWidth />
)}
data-cy="fichaSelectname"
onChange={(event, value) => handleOptionChange(event, value)}
value={option}
classes={classesAutocomplete}
/>
And here's the cypress code I used
cy.get('[data-cy=fichaSelectname]').click().type('{downarrow}').type('{enter}');
Did you try by selecting one element instead of just using the arrow buttons?
cy.get('[data-cy=fichaSelectname]').type('value{downarrow}{enter}');
Cypress did now show any stacktrace/error/info at all?
Well, first of all your code is wrong:
cy.get should be used like that: cy.get('[data-cy="fichaSelectname"]')
Try this.
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.
is there a way to get the base asset url in a Shopify liquid theme?
I'm translating a page to Shopify. This page uses Vuejs data binding like so:
<img src="/path/to/assets/folder/{{ color }}1.jpg">
I can't pass the curly braces to the filter because it will URL encode it. If I had access to the asset url it would be simple.
Any ideas?
You can escape liquid templates, so your tag would be like this
<img src="/path/to/assets/folder/{{ "{{ color " }}}}1.jpg">
not nice if you ask me. But there is another option, use vue bind instead of text interpolation, so there is no curly braces, when you use the v-bind directive, then you write pure javascript for that directive, so you quote your src attribute, or add it to a variable of your component.
usign the text
<img :src=" '/path/to/assets/folder/' + color + '1.jpg' ">
usign a variable
<!-- template -->
<img :src="img_path">
// js, data or props attribute
img_path: '/path/to/assets/folder/' + color + '1.jpg'
note: I used the shorthand version of v-bind:src => :src
I am trying to get some code syntax highlighting for some docs i'm writing, I'm using HAML and Highlight.js which will work for a single line of Ruby code like this (although the highlighting is not great):
%pre
%code
\=link_to('link name on page', 'link destiation', :class => 'class-name', :icon => 'clock-o', :icon_last => true)
But if I try and write some CSS in the pre and code tags, like this:
%pre
%code
ul {
li {
Background: red;
}
}
I get the "Illegal nesting: nesting within plain text is illegal." error, due to the brackets on the end of the CSS stuff.
Does anyone know of a plugin / method of being able to write code example (SASS, Ruby, HAML, Coffeescript mainly) on the webpage using HAML? Short of just writing all the css on one line. I'm aiming for this kind of result - CSS-Tricks
You can use the :preserve filter:
%pre
%code
:preserve
ul {
li {
Background: red;
}
}
This prevents the indented code being parsed as Haml, and also converts newlines into entities so that the code appears as you expect with no extra whitespace.
If you use the :ugly option exclusively you could use the :plain filter instead. This doesn’t convert newlines into entities but prevents parsing as Haml.