| Status | ||||
|---|---|---|---|---|
|
| Status | ||
|---|---|---|
|
| Expand | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The three statuses above and their possible values:
|
...
This component acts as a switcher for all content that sits below the component.
...
For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal. |
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 https://openedx.atlassian.net/browse/PAR-153 https://openedx.atlassian.net/browse/PAR-288 |
Other Jira tickets | |
Design resources |
...
...
...
...
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
🛠 Resources
...
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
...
🌳 Variants
This component should scale to support at least 2 tabs and up to as many tabs at we think should be supported.
...
🌞 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.
...
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
⚛ Anatomy
...
Legend
Button
…
♒ Behaviors
💕 Accessibility
...
Focus Management Expectations
...
...
What does an engineer need to know in order to build this component?
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24822
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24840
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24858
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7542%3A24876
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7548%3A20798
♒ 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.