I need to apply a accordion where icon on header is on right side. and can be open and close on click on header. Clarity also provide a accordion but icon is on left side. I want icon on right side. is it possible ?. if not the please suggest best way to apply accordion as i am using angular5.
Asked
Active
Viewed 364 times
1 Answers
0
The caret on the left side is a conscious design choice. Having the caret on the right makes eye tracking harder, you need to bounce from one end of the container to the other constantly to see what's expandable and what's not. Since Clarity can't control the width of our containers (it's entirely dependent on the app's use of them), this can be exacerbated on large container of full-page accordions, where the caret can be 800px from the title.
In addition to this, having the caret on the left for all of our components (tree, accordion, datagrid rows, vertical navigation, etc) ensures consistency, making the app easier to use if everything looks and behave the same.
Because of these reasons, Clarity doesn't provide an explicit way to customize the position of the caret. If you still want to go against Clarity's recommendation, you can simply write your own CSS to override Clarity styles to do it, either with absolute position, flex order, or whatever solution works for the component you are using.
Eudes
- 1,521
- 9
- 17
-
Thanks for suggestion. But I am using
as a accordion, and i am unable to override the css for this clarity tag. So any suggestion how can i override it's css. – Dharmesh Jain Dec 11 '18 at 07:04