Box
Use when
Use boxes as containers for related content and actions on pages such action hubs and record pages.
Don't use when
Don't use boxes to separate individual items in a list. Use repeaters or other layout approaches instead.
Don't use boxes to organize content in modal forms or split view workspaces. Use headers and spacing instead.
Don't add boxes to pre-defined sections of page layouts. For example, don't add boxes around lists on list pages or around related links on action hubs.
Heading
In general, boxes should include short headings to describe their contents. However, headings are optional so that consumers can exclude them when boxes contain content that doesn't require headings, such as visualizations or multimedia content.
To match to a page's semantic and visual hierarchy, adjust the box heading's headingLevelheadingStyle2
Help inline button
When you need to supplement a box with additional information but don't require persistent inline help, you can place a help inline button beside the heading to invoke contextual user assistance.
Control button
You can include a button in the top right to provide an edit action or a context menu with multiple actions.
Don't include multiple buttons in boxes. Instead, break up content so that boxes only contain related content that users can manage together.
Use proper spacing between boxes. Depending on your scenario, you can use fluid grid, CSS flexbox, CSS Grid or spacing classes.
Components
Guidelines
- NPM package
@skyux/layoutView in NPM | View in GitHub None found.- Install with NPM
npm install --save-exact @skyux/layoutNone found.
import { SkyBoxModule } from '@skyux/layout';
Selector: sky-box
Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.
Inputs
ariaLabel: string | undefined
The ARIA label for the box. This sets the box's aria-label attribute to provide a text equivalent for screen readers
to support accessibility.
If the box includes a visible label, use ariaLabelledBy instead.
For more information about the aria-label attribute, see the WAI-ARIA definition.
ariaLabelledBy: string | undefined
The HTML element ID of the element that labels
the box. This sets the box's aria-labelledby attribute to provide a text equivalent for screen readers
to support accessibility.
If the box does not include a visible label, use ariaLabel instead.
For more information about the aria-labelledby attribute, see the WAI-ARIA definition.
ariaRole: string | undefined
The ARIA role for the box to support accessibility by indicating what the box contains. For information about how an ARIA role indicates what an item represents on a web page, see the WAI-ARIA roles model.
headingHidden: boolean
Indicates whether to hide the headingText.
Default: false
headingLevel: SkyBoxHeadingLevel
The semantic heading level in the document structure. The default is 2.
Default: 2
headingStyle: SkyBoxHeadingStyle
The heading font style.
Default: 2
headingText: string | undefined
The text to display as the box's heading.
helpKey: string | undefined
A help key that identifies the global help content to display. When specified along with headingText, a help inline
button is placed beside the box heading. Clicking the button invokes global help
as configured by the application. This property only applies when headingText is also specified.
helpPopoverContent: string | TemplateRef<unknown> | undefined
The content of the help popover. When specified along with headingText, a help inline
button is added to the box heading. The help inline button displays a popover
when clicked using the specified content and optional title. This property only applies when headingText is also specified.
helpPopoverTitle: string | undefined
The title of the help popover. This property only applies when helpPopoverContent is
also specified.
Selector: sky-box-header
Specifies a header for the box.
Selector: sky-box-content
Specifies the body content to display inside the box and provides padding around that content.
Selector: sky-box-controls
Specifies the controls to display in upper right corner of the box. These buttons typically let users edit the box content.
type SkyBoxHeadingLevel = 2 | 3 | 4 | 5
type SkyBoxHeadingStyle = 2 | 3 | 4 | 5SKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkyBoxHarness } from '@skyux/layout/testing';
Harness for interacting with a box component in tests.
Methods
clickHelpInline(): Promise<void>
Clicks the help inline button.
Returns
Promise<void>
getAriaLabel(): Promise<null | string>
Gets the aria-label property of the box
Returns
Promise<null | string>
getAriaLabelledby(): Promise<null | string>
Gets the aria-labelledby property of the box
Returns
Promise<null | string>
getAriaRole(): Promise<null | string>
Gets the aria-role property of the box
Returns
Promise<null | string>
getHeadingHidden(): Promise<boolean>
Whether the heading is hidden.
Returns
Promise<boolean>
getHeadingLevel(): Promise<undefined | SkyBoxHeadingLevel>
The semantic heading level used for the checkbox group. Returns undefined if heading level is not set.
Returns
Promise<undefined | SkyBoxHeadingLevel>
getHeadingStyle(): Promise<SkyBoxHeadingStyle>
getHeadingText(): Promise<undefined | string>
Gets the box's heading text. If headingHidden is true,
the text will still be returned.
Returns
Promise<undefined | string>
getHelpPopoverContent(): Promise<undefined | string>
Gets the help popover content.
Returns
Promise<undefined | string>
getHelpPopoverTitle(): Promise<undefined | string>
Gets the help popover title.
Returns
Promise<undefined | string>
SkyBoxHarness.with(filters: SkyBoxHarnessFilters): HarnessPredicate<SkyBoxHarness>
Gets a HarnessPredicate that can be used to search for a
SkyBoxHarness that meets certain criteria
Parameters
filters: SkyBoxHarnessFilters
Returns
HarnessPredicate<SkyBoxHarness>
A set of criteria that can be used to filter a list of SkyBoxHarness instances.
interface SkyBoxHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
Loading...