Use sectioned forms when users navigate into a hierarchy and you expect them to know what they are looking for. This is common for editing pieces of a larger record and for tasks such as applying filters.
Use sectioned forms when it's beneficial to group related but independent forms to simplify the UI on the page. For example, use an Add filters button to open a sectioned form with multiple filter options instead of separate buttons and separate forms to access options to filter by giving, status, constituent code, ratings, or other options.
Use sectioned forms in large-sized and full-screen modals to ensure sufficient horizontal space for the component and its contents. Don't use smaller modal sizes.
Don't use sectioned forms when choices on one tab can affect other tabs because changes are potentially invisible or unpredictable to users.
Don't use sectioned forms in small- or medium-sized modals because the component requires the horizontal space that large-sized and full-screen modals provide.
Sectioned forms are partially responsive by default. The tab pane is hidden when a small enough breakpoint size is reached, which leaves the user only viewing currently selected form.
Because of this behavior, the user needs a way to view the tab pane so they can change which form tab they are viewing. This behavior must be configured manually, using a button in the footer of the modal, as is done in the Behavioral Demo above, and is shown in the Code Examples in the Development pane.
@skyux/tabsView in NPM | View in GitHub None found. npm install --save-exact @skyux/tabs None found. import { SkySectionedFormModule } from '@skyux/tabs';
Selector: sky-sectioned-form
Creates a container for the sectioned forms.
maintainSectionContent: boolean | undefinedWhether the sectioned form loads section content during initialization so that it displays content without moving around elements in the content container.
Default: false
messageStream: Subject<SkySectionedFormMessage>indexChanged: EventEmitter<number>Fires when the active tab changes and emits the index of the active section. The index is based on the section's position when the form loads.
tabsVisibleChanged: EventEmitter<boolean>Fires when the sectioned form tabs are shown or hidden.
Selector: sky-sectioned-form-section
Creates an individual form to display as a section within the sectioned form.
heading: string | undefinedThe section header.
active: boolean | undefinedWhether the section is active when the form loads.
Default: false
itemCount: number | undefinedThe number of items within the section. A counter appears beside the section header.
invalidFieldChanged(isInvalid: boolean | undefined): voidSets the current section's invalid state based on the isInvalid parameter.
This method is used within a sky-sectioned-form-section element.
isInvalid: boolean | undefinedvoid
requiredFieldChanged(isRequired: boolean | undefined): voidSets the current section's required state based on the isRequired parameter.
This method is used within a sky-sectioned-form-section element.
isRequired: boolean | undefinedvoid
interface SkySectionedFormMessage {
type: ShowTabs;
}type: ShowTabsenum SkySectionedFormMessageType {
ShowTabs = 1,
}SkySectionedFormMessageType.ShowTabsSKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkySectionedFormHarness } from '@skyux/tabs/testing';
Harness for interacting with a sectioned form component in tests.
getActiveSection(): Promise<undefined | SkySectionedFormSectionHarness>Gets the SkySectionedFormSectionHarness for the currently active section.
Promise<undefined | SkySectionedFormSectionHarness>
getActiveSectionContent(): Promise<undefined | SkySectionedFormSectionContentHarness>Promise<undefined | SkySectionedFormSectionContentHarness>
getSection(filters: SkySectionedFormSectionHarnessFilters): Promise<SkySectionedFormSectionHarness>filters: SkySectionedFormSectionHarnessFiltersPromise<SkySectionedFormSectionHarness>
getSections(filters?: SkySectionedFormSectionHarnessFilters): Promise<SkySectionedFormSectionHarness[]>filters?: SkySectionedFormSectionHarnessFiltersPromise<SkySectionedFormSectionHarness[]>
isSectionsVisible(): Promise<boolean>Whether the section tabs are visible. In mobile view, sectioned forms collapse to just content pane.
Promise<boolean>
SkySectionedFormHarness.with(filters: SkySectionedFormHarnessFilters): HarnessPredicate<SkySectionedFormHarness>Gets a HarnessPredicate that can be used to search for a
SkySectionedFormHarness that meets certain criteria.
filters: SkySectionedFormHarnessFiltersHarnessPredicate<SkySectionedFormHarness>
A set of criteria that can be used to filter a list of SkySectionedFormHarness instances.
interface SkySectionedFormHarnessFilters {
dataSkyId?: string | RegExp;
}dataSkyId?: string | RegExpOnly find instances whose data-sky-id attribute matches the given value.
import { SkySectionedFormSectionHarness } from '@skyux/tabs/testing';
Harness for interacting with a sectioned form section component in tests.
click(): Promise<void>Clicks the section to activate.
Promise<void>
getSectionContent(): Promise<SkySectionedFormSectionContentHarness>Gets the SkySectionedFormSectionContentHarness for this section.
getSectionHeading(): Promise<string>Gets the section heading.
Promise<string>
getSectionItemCount(): Promise<number>Gets the section item count.
Promise<number>
isActive(): Promise<boolean>Whether the section is active.
Promise<boolean>
SkySectionedFormSectionHarness.with(filters: SkySectionedFormSectionHarnessFilters): HarnessPredicate<SkySectionedFormSectionHarness>Gets a HarnessPredicate that can be used to search for a
SkySectionedFormSectionHarness that meets certain criteria.
filters: SkySectionedFormSectionHarnessFiltersHarnessPredicate<SkySectionedFormSectionHarness>
A set of criteria that can be used to filter a list of SkySectionedFormSectionHarness instances.
interface SkySectionedFormSectionHarnessFilters {
dataSkyId?: string | RegExp;
sectionHeading?: string;
}dataSkyId?: string | RegExpOnly find instances whose data-sky-id attribute matches the given value.
sectionHeading?: stringFinds a section whose heading matches the given value.
import { SkySectionedFormSectionContentHarness } from '@skyux/tabs/testing';
Harness for interacting with a sectioned form content in tests.
isVisible(): Promise<boolean>Whether the section content is visible.
Promise<boolean>
queryHarness(query: HarnessQuery<T>): Promise<T>Returns a child harness or throws an error if not found.
query: HarnessQuery<T>Promise<T>
queryHarnesses(harness: HarnessQuery<T>): Promise<T[]>Returns child harnesses.
harness: HarnessQuery<T>Promise<T[]>
queryHarnessOrNull(query: HarnessQuery<T>): Promise<null | T>Returns a child harness or null if not found.
query: HarnessQuery<T>Promise<null | T>
querySelector(selector: string): Promise<TestElement>Returns a child test element or throws an error if not found.
selector: stringPromise<TestElement>
querySelectorAll(selector: string): Promise<TestElement[]>Returns child test elements.
selector: stringPromise<TestElement[]>
querySelectorOrNull(selector: string): Promise<null | TestElement>Returns a child test element or null if not found.
selector: stringPromise<null | TestElement>
SkySectionedFormSectionContentHarness.with(filters: SkySectionedFormSectionContentHarnessFilters): HarnessPredicate<SkySectionedFormSectionContentHarness>Gets a HarnessPredicate that can be used to search for a
SkySectionedFormSectionContentHarness that meets certain criteria.
filters: SkySectionedFormSectionContentHarnessFiltersHarnessPredicate<SkySectionedFormSectionContentHarness>
A set of criteria that can be used to filter a list of SkySectionedFormSectionContentHarness instances.
interface SkySectionedFormSectionContentHarnessFilters {
dataSkyId?: string | RegExp;
}dataSkyId?: string | RegExpOnly find instances whose data-sky-id attribute matches the given value.
Loading...