I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup. I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9. I am trying to force UI to always show like
0 1 2 3 4
5 6 7 8 9
but it changes according to width.
There is no property that I can attach in the choiceGroup as well. It looks like some CSS stuff.
Please guide me with this. Thank you.
I don't see better way to achieve that scenario then to put fixed width of ChoiceGroup root element:
<ChoiceGroup styles={{ root: { width: 500 } }} label="Pick one icon" defaultSelectedKey="day" options={options} />
Items inside ChoiceGroup are wrapped with flexContainer which includes:
display: flex;
flex-wrap: wrap;
You can modify it if you need:
<ChoiceGroup styles={{ flexContainer: { flexWrap: 'nowrap' } }} defaultSelectedKey="day" options={options} />
Codepen working example.
Related
I'm looking to create animations similar to those on this page as each element comes into view, except they would slide in from the left/right.
I've done things like this with React previously with framer motion like this:
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.3, delay: 0.5 }}
variants={{
visible: { opacity: 1, x: 0 },
hidden: { opacity: 0, x: 50 }
}}
>
content
</motion.div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I can't seem to find a similar equivalent in React Native though. Does someone have a code sandbox and/or a npm package that can help with this?
Thanks
You could try react-native-animatable.
This would look something like this:
<Animatable.View
animation="bounceInLeft"
duration={600}
>
<Text >
Animation Example!
</Text>
</Animatable.View>
);
You can go with react-native-reanimated, and use entering LayoutAnimation.
I think this is one of the best, cuz almost every project has reanimated library, and these animations runs on the UI thread.
Quick note: As I know, the LayoutAnimation fundamentals is in rewriting phase right now.
I am using line chart for showing data. It working absolutely fine but if my data has negative value in that condition my chart is cutting from bottom.
You can see my error in above image which marked with red color.
I used react-native-pure-chart - below link :-
https://www.npmjs.com/package/react-native-pure-chart
<PureChart type={'line'}
numberOfYAxisGuideLine={0}
data={this.state.sampleData}
width={'100%'}
height={72}
backgroundColor={'#2c3554'}
color={'#2c3554'}
/>
My data is [10,-2,6]
Please help me. Thank you in advance
I got the solution.
Use react-native-svg-chart (Linechart).
It will solve the issue.
Below is my code :-
import { LineChart } from 'react-native-svg-charts'
<LineChart
style={{ flex: 1, marginLeft: 4 }}
data={this.state.sampleData}
svg={{ stroke: 'rgb(211, 234, 250,0.7)' }}
contentInset={contentInset}
/>
The release 2.1.3 of react-admin introduced the use of <Typography /> for the NumberField component (and others) in place of <span />.
This component has a style to align text on the right.
const styles = {
input: { textAlign: 'right' },
};
I don't know why, but with the span element the number was aligned left.
Now the number is aligned right, but not aligned with the same margin if there are others number fields.
Code demo (Comment show screen) / Screenshot
I tried to define a className on my component...
<NumberField source="id" className="leftalign" />
with
.leftalign {
text-align: left;
}
...but the class is overridden by the style-generated class NumberField-input-234 (except if I set !important but I would like to avoid this).
My questions are:
Is there a way to align them on the left without the uggly !important css flag or writing style={{ textAlign: 'left' }} each time I use a <NumberField />?
Is there a way to align right with the same margin?
Thanks
This issue has been resolved in react-admin#2.2.0
MOBILE ISSUE ONLY. VIEW ON YOUR PHONE.
I have complete working jssor implementation.
See here : http://www.followupapp.co/learn/learnkonvav2.html
However I took a responsive template and added above code to it. The dragging does not let me scroll past all the items.
See the issue here: http://www.followupapp.co/learn/comply.html
The code can be viewsourced.
I don't fully understand jssor.
You placed jssor slider in <div class="card-block"> element.
And there is 1.25rem padding as below,
.card-block {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
Please remove the padding: 1.25rem; to solve the problem.
With the ListView component in react-native - is it possible to render rows within sections like this?
<section>
<row>A</row>
<row>B</row>
</section>
<section>
<row>C</row>
<row>D</row>
</section>
And not like this:
<section></section>
<row>A</row>
<row>B</row>
<section></section>
<row>C</row>
<row>D</row>
I'm using renderRow and renderSectionHeader.
The reason I want to render like this is due to the styling. But maybe I'll need to have two nested ListView instead?
I can propose a bit hacky solution.
On android to add shadow to secton you can set elevation to all rows and section header. On ios you need to set shadow* styles.
But you will get problem if you will decide to add borderRadius. In this case to prevent top border artifacts you can add small negative marginBottom (-2 or -4 should be enough) to each row.
shadow: {
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 1,
shadowOpacity: 0.2,
elevation: 2,
borderRadius: 2,
marginBottom: -2,
}
ListView with 3 rows: