Summary Detail
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
Summary Title
In ProgressAdditional information about this step
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.
About Summary Detail#
The summary detail component uses a button to show and hide content while showing an overall summary
Base#
Summary Title
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.
<div class="slds-summary-detail slds-is-open">
<button class="slds-button slds-button_icon slds-m-right_x-small" title="Toggle details for Summary Title" aria-controls="expando-unique-id" aria-expanded="true">
<svg class="slds-button__icon slds-summary-detail__action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>States#
Closed#
Summary Title
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.
<div class="slds-summary-detail">
<button class="slds-button slds-button_icon slds-m-right_x-small" title="Toggle details for Summary Title" aria-controls="expando-unique-id" aria-expanded="false">
<svg class="slds-button__icon slds-summary-detail__action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>Examples#
Closed with Complex title#
Summary Title
In ProgressAdditional information about this step
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.
<div class="slds-summary-detail">
<button class="slds-button slds-button_icon slds-m-right_x-small" title="Toggle details for Summary Title" aria-controls="expando-unique-id" aria-expanded="false">
<svg class="slds-button__icon slds-summary-detail__action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>Open with Complex title#
Summary Title
In ProgressAdditional information about this step
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.
<div class="slds-summary-detail slds-is-open">
<button class="slds-button slds-button_icon slds-m-right_x-small" title="Toggle details for Summary Title" aria-controls="expando-unique-id" aria-expanded="true">
<svg class="slds-button__icon slds-summary-detail__action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-summary-detail |
|---|---|
| Summary | Initializes a summary detail |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-summary-detail__action-icon |
|---|---|
| Summary | Styles the position of the toggle icon |
| Restrict | .slds-summary-detail div |
| Selector | .slds-summary-detail__content |
|---|---|
| Summary | Styles the visibility of the detail content |
| Restrict | .slds-summary-detail div |
| Selector | .slds-is-open |
|---|---|
| Summary | Toggle visibility of the detail section + rotate icon |
| Restrict | .slds-summary-detail |
| Modifier | True |
Summary Detail Release Notes
2.22.1
Fixed
- Matching styles for [dir=rtl] added.
2.22.0
Changed
- Replaced aria-hidden with hidden attribute for components that show/hide content