Tabs
DESIGN COMPLETE IMPLEMENTATION PENDING
Contributors | @Hilary Gordon (Deactivated) @Eugene Kang @Adam Butterworth (Deactivated) |
|---|---|
Slack channel | |
Paragon Jira ticket | https://openedx.atlassian.net/browse/PAR-107 https://openedx.atlassian.net/browse/PAR-160 |
Other Jira tickets | |
Design resources |
|
Technical docs |
Design
Use cases
Switching between Login and Registration
Discussion tabs: Switching between key actions within Discussions
Non-use cases
Not a use case - for discussion to review as a distinct nav pattern: Course Dashboard tabs: Switching between Courses, Programs and Discover New
Not a use case - for discussion to review as a distinct nav pattern: In-course tabs: Navigating between Course Home, Dates, and any other tab
Best Practices
Mobile
We should consider the mobile experience for the tabs component. If there are only 2 tabs, we shouldn’t collapse the tab options on small screen sizes.
If there are more than 2 tabs, we should consider consolidating into either an accordion menu, dropdown menu, horizontal scrolling (least preferred).
Nesting
We should have some perspective on nesting a tab component. In the Discussion example above, the Course tabs themselves would be a tab component, but so would “My Posts” “All posts” and “Topics”. Do we need to consider 2 styles for tabs for when they are nested to indicate priority?
Specification
What does an engineer need to know in order to build this component?
Behaviors
Click on a TabButton | Show the related content in a TabPane below the Tab Navigation |
|---|
Accessibility
|
Notes
Notes from collaborator conversations or meetings regarding this component.
XX.XX.20XX