Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Timeline (replace Steps) Stepper, Steps, Feed) #154

Closed
techniq opened this issue Dec 19, 2023 · 2 comments
Closed

Add Timeline (replace Steps) Stepper, Steps, Feed) #154

techniq opened this issue Dec 19, 2023 · 2 comments

Comments

@JonathonRP
Copy link

i like the idea of having stepper and timeline

@techniq
Copy link
Owner Author

techniq commented Jun 18, 2024

New Timeline (replaces old Steps component) and new Steps components now available.

Differences between them

  • Steps
    • Consistent width (horizontal) or height (vertical) for each step based on orientation
    • Preceding line is controlled by subsequent step
    • Simple configuration (default slot controls label, content/icon prop content content of point
  • Timeline
    • Variable width (horizontal) or height (vertical) for each event based on orientation
    • Half the line before and half the line after event is controlled by event. When an event is marked as completed, the line after the event is styled. This is mostly due to the inability to to style preceding items in the DOM.
    • More complex configuration as each event can have start and/or end label (which can be a simple string or use a named slot). Using compact and snapPoint also enables additional layout refinements.

They both overlap in some use cases and mostly comes down to needs of the design, and some tradeoffs (simpler/easier to work with vs more complexity/flexibility)

@techniq techniq closed this as completed Jun 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants