...
| Table of Contents |
|---|
Design
Mockups
Provided by Unicon
Tab Management Options
Tab management options (edit, delete, move) will appear on the active tab. If the active tab is locked, a locked indicator will display instead. For creating new tabs, an Add Tab link is available on the tab bar.
...
Clicking the tab name starts inline editing, turning the tab name into an editable text field. Clicking outside of the tab or pressing the Enter key on the keyboard completes and saves the inline edit, returning the tab to its normal state.
Move Tab
Tabs can be reordered by drag and drop. "Grippy" visual on current tab and hover/focus feedback indicates and invites interaction.
When the tab is dragged, a transparent avatar of the tab will appear at the cursor. The tab drag action should be constrained horizontally to indicate list reordering context and to keep the drop action simple. Drop target is indicated by an arrow. Dropping the tab will dismiss the drag avatar and instantiate the dragged tab at the drop target position. The dropped tab remains the current selection.
Delete Tab
The current tab can be deleted. "X" visual on current tab and hover/focus feedback indicates and invites interaction.
Clicking on the "X" delete link on the current tab brings up a confirmation dialog. If confirmed, the current page is deleted, and the user is returned to the next available tab.
Interaction
| Panel |
|---|
Managing Tabs/Pages(not in scope for BYU)Portal tabs will need to be added/removed, named, and ordered. Inline edit is recommended for naming. List drag and drop is recommended for ordering. Considerations
Design Patterns |