Description list
Use when
Use description lists to display sets of simple data that are easy to scan and where the relationships between terms and descriptions are easy to understand.
Use description lists with unordered lists to associate terms with multiple descriptions. Use line breaks or comma-separated values depending on the layout and context.
Use description lists in the long-description mode to display glossaries and other data where the descriptions are complete sentences or longer.
Don't use when
Don't use description lists to highlight important data that the information hierarchy should emphasize. Use key info or other methods to call out information instead.
Don't use description lists when users can understand data based on its context and don't need a label.
Help inline button
When you need to supplement a description list term with additional information but don't require persistent inline help, you can place a help inline button beside the term to invoke contextual user assistance.
Responsiveness (horizontal layout)
Horizontal description lists respond to the width of their containers by changing to 1- and 2-column layouts when appropriate.
Responsiveness (long-description mode)
In long-description mode, description lists respond to the width of their containers by wrapping text or stacking term-description pairs when appropriate.
Don't use colons or other punctuation after description list terms.
Horizontal layout
Use the horizontal layout to display up to 6 term-description pairs in description lists that stand alone.
Vertical layout
Use the vertical layout to make scanning easier when containers include multiple description lists or when description lists are combined with other content. Use a fluid grid to arrange multiple description lists in a container.
Use descriptive headings to make scanning easier.
Components
Guidelines
- NPM package
@skyux/layoutView in NPM | View in GitHub None found.- Install with NPM
npm install --save-exact @skyux/layoutNone found.
import { SkyDescriptionListModule } from '@skyux/layout';
Selector: sky-description-list
Creates a description list to display term-description pairs.
Inputs
defaultDescription: string
The default description to display when no description is provided for a term-description pair.
Default: "None found"
listItemWidth: string | undefined
The width of term-description pairs when mode is set to "horizontal". By default,
the width is responsive based on the width of the container element.
How to display term-description pairs within the description list.
Default: "vertical"
Selector: sky-description-list-content
Wraps the term-description pairs in the description list.
Inputs
helpKey: string | undefined
A help key that identifies the global help content to display. When specified, a help inline button is placed beside the description list content label. Clicking the button invokes global help as configured by the application.
helpPopoverContent: string | TemplateRef<unknown> | undefined
The content of the help popover. When specified, a help inline button is added to the description list content. The help inline button displays a popover when clicked using the specified content and optional title.
helpPopoverTitle: string | undefined
The title of the help popover. This property only applies when helpPopoverContent is
also specified.
Selector: sky-description-list-description
Specifies the description in a term-description pair.
Selector: sky-description-list-term
Specifies the term in a term-description pair. To display a help button beside the term, include a help button element in the sky-description-list-term element and a sky-control-help CSS class on that element.
How to display the term-description pairs within a description list.
type SkyDescriptionListModeType = "horizontal" | "longDescription" | "vertical"SKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkyDescriptionListHarness } from '@skyux/layout/testing';
Harness for interacting with a description list component in tests.
Methods
getContent(): Promise<SkyDescriptionListContentHarness[]>
Returns
Promise<SkyDescriptionListContentHarness[]>
getMode(): Promise<SkyDescriptionListModeType>
SkyDescriptionListHarness.with(filters: SkyDescriptionListHarnessFilters): HarnessPredicate<SkyDescriptionListHarness>
Gets a HarnessPredicate that can be used to search for a
SkyDescriptionListHarness that meets certain criteria
Parameters
filters: SkyDescriptionListHarnessFilters
Returns
HarnessPredicate<SkyDescriptionListHarness>
A set of criteria that can be used to filter a list of SkyDescriptionListHarness instances.
interface SkyDescriptionListHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
import { SkyDescriptionListContentHarness } from '@skyux/layout/testing';
Harness for interacting with a description list content component in tests.
Methods
clickHelpInline(): Promise<void>
Clicks the help inline button.
Returns
Promise<void>
getDescriptionText(): Promise<string>
Gets the description component text.
Returns
Promise<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>
getTermText(): Promise<string>
Gets the term component text.
Returns
Promise<string>
Loading...