mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
150 lines
6.8 KiB
YAML
150 lines
6.8 KiB
YAML
|
name: Panels
|
||
|
|
description: A flexible container component that provides structured content areas with headers, bodies, and footers, supporting
|
||
|
|
various layouts and content organization patterns for building complex interfaces.
|
||
|
|
category: Layout
|
||
|
|
slds_classes:
|
||
|
|
root: slds-panel
|
||
|
|
elements:
|
||
|
|
- class: slds-panel__header
|
||
|
|
description: Panel header section
|
||
|
|
purpose: Contains panel title and header actions
|
||
|
|
- class: slds-panel__body
|
||
|
|
description: Panel content area
|
||
|
|
purpose: Contains the main panel content
|
||
|
|
- class: slds-panel__actions
|
||
|
|
description: Panel action controls
|
||
|
|
purpose: Contains buttons and interactive elements
|
||
|
|
- class: slds-panel__close
|
||
|
|
description: Panel close button
|
||
|
|
purpose: Allows panel dismissal
|
||
|
|
modifiers:
|
||
|
|
- class: slds-panel_docked
|
||
|
|
description: Docked panel layout
|
||
|
|
usage: For panels attached to screen edges
|
||
|
|
- class: slds-panel_filters
|
||
|
|
description: Filter panel style
|
||
|
|
usage: For filter and search interfaces
|
||
|
|
states: []
|
||
|
|
variants:
|
||
|
|
- name: Base
|
||
|
|
description: Standard panel with header, body, and footer
|
||
|
|
classes:
|
||
|
|
- slds-panel
|
||
|
|
usage_context: Default implementation for panel containers
|
||
|
|
differences: Basic panel structure with flexible content area
|
||
|
|
- name: Docked
|
||
|
|
description: Panel docked to screen edge
|
||
|
|
classes:
|
||
|
|
- slds-panel
|
||
|
|
- slds-panel_docked
|
||
|
|
usage_context: When panel should be attached to viewport edge
|
||
|
|
differences: Fixed positioning with edge attachment
|
||
|
|
- name: Drawer
|
||
|
|
description: Slide-out drawer panel
|
||
|
|
classes:
|
||
|
|
- slds-panel
|
||
|
|
usage_context: For slide-out navigation or content
|
||
|
|
differences: Slide animation and overlay behavior
|
||
|
|
- name: Filter
|
||
|
|
description: Panel optimized for filtering interfaces
|
||
|
|
classes:
|
||
|
|
- slds-panel
|
||
|
|
- slds-panel_filters
|
||
|
|
usage_context: For search and filter controls
|
||
|
|
differences: Optimized layout for form controls and filters
|
||
|
|
lightning_component:
|
||
|
|
name: lightning-panel
|
||
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
||
|
|
mapping_notes: Panel functionality often implemented through modal or overlay components
|
||
|
|
accessibility:
|
||
|
|
keyboard_support:
|
||
|
|
- Tab navigation through panel content
|
||
|
|
- Escape to close dismissible panels
|
||
|
|
- Arrow keys for panel navigation when applicable
|
||
|
|
- Focus management for panel open/close
|
||
|
|
screen_reader:
|
||
|
|
- Panel purpose and content announced
|
||
|
|
- Panel state changes communicated
|
||
|
|
- Panel structure properly described
|
||
|
|
aria_attributes:
|
||
|
|
- role='region' for panel containers
|
||
|
|
- aria-label for panel purpose
|
||
|
|
- aria-expanded for collapsible panels
|
||
|
|
- aria-hidden for closed panels
|
||
|
|
usage_guidelines:
|
||
|
|
when_to_use:
|
||
|
|
- For organizing related content in structured areas
|
||
|
|
- When creating sidebar or detail views
|
||
|
|
- For filter and configuration interfaces
|
||
|
|
- In dashboard and workspace layouts
|
||
|
|
when_not_to_use:
|
||
|
|
- For simple content grouping (use cards instead)
|
||
|
|
- When modal behavior is needed
|
||
|
|
- For single-purpose content displays
|
||
|
|
best_practices:
|
||
|
|
- Provide clear panel headers with descriptive titles
|
||
|
|
- Ensure panels are keyboard accessible
|
||
|
|
- Use appropriate panel types for content
|
||
|
|
- Handle responsive behavior appropriately
|
||
|
|
- Provide clear close/dismiss mechanisms
|
||
|
|
common_mistakes:
|
||
|
|
- Overusing panels for simple content
|
||
|
|
- Poor responsive panel behavior
|
||
|
|
- Missing accessibility considerations
|
||
|
|
- Inconsistent panel sizing and spacing
|
||
|
|
code_examples:
|
||
|
|
- title: Basic Panel
|
||
|
|
description: Slide-out drawer panel with overlay
|
||
|
|
code: "<!-- Backdrop -->\n <div class=\"slds-backdrop slds-backdrop_open\" style=\"z-index: 999;\"></div>\n <!--\
|
||
|
|
\ Drawer Panel -->\n <div class=\"slds-panel\" role=\"dialog\" aria-label=\"Navigation drawer\" aria-modal=\"true\"\
|
||
|
|
>\n <div class=\"\" style=\"position: fixed; left: 0; top: 0; width: 280px; height: 100vh; z-index: 1000; transform:\
|
||
|
|
\ translateX(0);\">\n <div class=\"slds-panel__header\">\n <div class=\"slds-media slds-media_center\"\
|
||
|
|
>\n <div class=\"slds-media__body\">\n <h2 class=\"slds-text-heading_small\">\n \
|
||
|
|
\ Navigation\n </h2>\n </div>\n <div class=\"slds-media__figure slds-media__figure_reverse\"\
|
||
|
|
>\n <button class=\"slds-button slds-button_icon slds-panel__close\" title=\"Close navigation\">\n \
|
||
|
|
\ <svg class=\"slds-button__icon\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"\
|
||
|
|
></use>\n </svg>\n <span class=\"slds-assistive-text\">Close navigation</span>\n \
|
||
|
|
\ </button>\n </div>\n </div>\n </div>\n <div class=\"slds-panel__body\">\n \
|
||
|
|
\ <nav class=\"slds-nav-vertical\" aria-label=\"Sub page navigation\">\n <div class=\"slds-nav-vertical__section\"\
|
||
|
|
>\n <h3 class=\"slds-nav-vertical__title\">Section 1</h3>\n <ul>\n <li class=\"\
|
||
|
|
slds-nav-vertical__item slds-is-active\">\n <a href=\"#\" class=\"slds-nav-vertical__action\" aria-current=\"\
|
||
|
|
page\">Item 1</a>\n </li>\n <li class=\"slds-nav-vertical__item\">\n <a\
|
||
|
|
\ href=\"#\" class=\"slds-nav-vertical__action\">Item 2</a>\n </li>\n <li class=\"slds-nav-vertical__item\"\
|
||
|
|
>\n <a href=\"#\" class=\"slds-nav-vertical__action\">Item 3</a>\n </li>\n \
|
||
|
|
\ </ul>\n </div>\n <div class=\"slds-nav-vertical__section\">\n <h3 class=\"slds-nav-vertical__title\"\
|
||
|
|
>Section 2</h3>\n <ul>\n <li class=\"slds-nav-vertical__item\">\n <a href=\"\
|
||
|
|
#\" class=\"slds-nav-vertical__action\">Item 4</a>\n </li>\n <li class=\"slds-nav-vertical__item\"\
|
||
|
|
>\n <a href=\"#\" class=\"slds-nav-vertical__action\">Item 5</a>\n </li>\n \
|
||
|
|
\ </ul>\n </div>\n </nav>\n </div>\n </div>\n </div>\n"
|
||
|
|
dependencies:
|
||
|
|
css_files:
|
||
|
|
- panel.css
|
||
|
|
- button.css
|
||
|
|
- form-element.css
|
||
|
|
javascript:
|
||
|
|
- panel.js
|
||
|
|
- panel-drawer.js
|
||
|
|
icons:
|
||
|
|
- utility-sprite.svg
|
||
|
|
other_components:
|
||
|
|
- button
|
||
|
|
- form-element
|
||
|
|
- nav-vertical
|
||
|
|
related_components:
|
||
|
|
- name: Modal
|
||
|
|
relationship: similar
|
||
|
|
description: Similar overlay behavior for some panel types
|
||
|
|
- name: Card
|
||
|
|
relationship: alternative
|
||
|
|
description: Alternative for simpler content grouping
|
||
|
|
- name: Drawer
|
||
|
|
relationship: variant
|
||
|
|
description: Specific drawer implementation of panels
|
||
|
|
references:
|
||
|
|
official_docs: https://v1.lightningdesignsystem.com/components/panels/
|
||
|
|
metadata:
|
||
|
|
version: 1.0.0
|
||
|
|
last_updated: '2025-11-12'
|
||
|
|
review_status: complete
|
||
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|