-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui5-wizard): introduce new component (#2400)
Introduce ui5-wizard and ui5-wizard-step components that enables users to accomplish a single goal that consists of multiple dependable sub-tasks. The ui5-wizard-step API defines both the content of particular step and its corresponding tab, displayed within the Wizard's navigation header with the icon and text properties. Also, the component provides selected and disabled properties, that determine which step is currently "selected" (active), which ones are enabled or disabled. Тhe Wizard does not provide "move to next button", instead we give the user freedom to decide how to move to particular step. It might be button, or something else, placed inside the content of step. At the end, to move to particular step, the user can use the API of the ui5-wizard-step (selected and disabled). In terms of user experience, the wizard allows navigation between enabled (validated) steps upon clicking the steps within the navigation header and via scrolling. When these interactions occur, the wizard updates the selected state and fires selection-change event to notify the interested parties. FIXES: #2368
- Loading branch information
Showing
29 changed files
with
3,126 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <div class="ui5-wiz-root" aria-label="{{ariaLabelText}}"> | ||
| <div class="ui5-wiz-nav" role="navigation" aria-roledescription="{{navAriaRoleDescription}}" tabindex="-1"> | ||
| <ul class="ui5-wiz-nav-list" role="list"> | ||
| {{#each _stepsInHeader}} | ||
| <ui5-wizard-tab | ||
| heading="{{heading}}" | ||
| subheading="{{subheading}}" | ||
| icon="{{icon}}" | ||
| number="{{number}}" | ||
| ?disabled="{{disabled}}" | ||
| ?selected="{{selected}}" | ||
| ?hide-separator="{{hideSeparator}}" | ||
| ?active-separator="{{activeSeparator}}" | ||
| ?branching-separator="{{branchingSeparator}}" | ||
| role="listitem" | ||
| aria-posinset="{{pos}}" | ||
| aria-setsize="{{size}}" | ||
| aria-roledescription="{{roleDescription}}" | ||
| aria-label="{{ariaLabel}}" | ||
| data-ui5-content-ref-id="{{this.refStepId}}" | ||
| data-ui5-index="{{pos}}" | ||
| _tab-index="{{tabIndex}}" | ||
| @selection-change-requested="{{../onSelectionChangeRequested}}" | ||
| @focused="{{../onStepInHeaderFocused}}" | ||
| ></ui5-wizard-tab> | ||
| {{/each}} | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="ui5-wiz-content" @scroll="{{onScroll}}"> | ||
| {{#each _steps}} | ||
| <div class="ui5-wiz-content-item" | ||
| ?hidden="{{disabled}}" | ||
| ?selected="{{selected}}" | ||
| ?stretch="{{stretch}}" | ||
| data-ui5-content-item-ref-id="{{_id}}"> | ||
| <slot name="{{this._individualSlot}}"></slot> | ||
| </div> | ||
| {{/each}} | ||
| </div> | ||
| </div> |
Oops, something went wrong.