search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
105 stars 38 forks source link

Dots navigation component #374

Closed alexfrompiter closed 2 years ago

alexfrompiter commented 2 years ago

Feature

Dot navigation component need to operate slideshows or to scroll to different page sections This component used in ConstructSim project

Examples

dotsNavigation

alexfrompiter commented 2 years ago

Can I make PRs to ITwinUI and iTwinUI-react to move Dots navigation component from ConstructSim?

FlyersPh9 commented 2 years ago

Hey @alexfrompiter, thanks for reaching out. @gretanausedaite and I are actively working on a branch that implements something very similar. Screenshots of what we currently have below: Screen Shot 2021-11-09 at 3 49 40 PM Screen Shot 2021-11-09 at 3 49 52 PM

Would something like this work for you?

alexfrompiter commented 2 years ago

Hey @FlyersPh9, I have implemented dots component based on this video: https://user-images.githubusercontent.com/5772950/141108237-2504e185-b58b-4205-9624-2599743be912.mp4

If you are interested, I can share the code.

FlyersPh9 commented 2 years ago

@alexfrompiter sure, I'll take a look at your code.

alexfrompiter commented 2 years ago

@FlyersPh9

code: dots_navigation.zip

demo: https://user-images.githubusercontent.com/5772950/141137427-48ff8467-ed4a-41b4-abd9-44717fb1be2d.mov

mayank99 commented 2 years ago

@alexfrompiter This was released in @itwin/itwinui-css@0.45.0 and will likely be available in next minor version of @itwin/itwinui-react (i.e. 1.30.0) in a few days.

veekeys commented 2 years ago

Hey @alexfrompiter

Carousel and Dots components are available in @itwin/itwinui-react@1.35.0

Check usage in here https://itwin.github.io/iTwinUI-react/?path=/story/core-carousel--basic