mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
166 lines
11 KiB
Markdown
166 lines
11 KiB
Markdown
|
# SLDS Design
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
**Use blueprints** when building custom HTML/CSS, targeting non-Salesforce platforms, or when no Lightning Base Component exists.
|
||
|
|
|
||
|
|
Refer to the SLDS blueprints in [slds-blueprints.json](slds-blueprints.json)
|
||
|
|
|
||
|
|
**Use Lightning Base Components** when working within Salesforce (LWC, Aura, Visualforce) — they handle accessibility, events, and framework integration automatically.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Blueprints by Category
|
||
|
|
|
||
|
|
### Actions (4 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ---------------------- | -------------------------------- | ------------------------ |
|
||
|
|
| **Buttons** | Action triggers with text labels | `lightning-button` |
|
||
|
|
| **Button Icons** | Icon-only action triggers | `lightning-button-icon` |
|
||
|
|
| **Button Groups** | Related buttons in a row | `lightning-button-group` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Input (23 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ------------------------- | ---------------------------------------------- | ----------------------------------- |
|
||
|
|
| **Checkbox** | Binary selection control | `lightning-input` (type="checkbox") |
|
||
|
|
| **Checkbox Button** | Checkbox styled as a button | `lightning-checkbox-button` |
|
||
|
|
| **Checkbox Button Group** | Set of checkbox buttons in a fieldset | N/A |
|
||
|
|
| **Checkbox Toggle** | Toggle-style checkbox | N/A |
|
||
|
|
| **Combobox** | Text input with dropdown list | `lightning-combobox` |
|
||
|
|
| **Counter** | Number input with increment/decrement controls | `lightning-input` |
|
||
|
|
| **Datepickers** | Calendar date selection | `lightning-input` (type="date") |
|
||
|
|
| **Datetime Picker** | Combined date and time selection | N/A |
|
||
|
|
| **Dueling Picklist** | Multi-select with two lists | N/A |
|
||
|
|
| **Expression** | Formula builder interface | N/A |
|
||
|
|
| **File Selector** | File upload with drag-and-drop | `lightning-file-upload` |
|
||
|
|
| **Form Element** | Wrapper for form inputs | N/A |
|
||
|
|
| **Input** | Text/number input | `lightning-input` |
|
||
|
|
| **Lookups** | Search and select from a dataset | N/A |
|
||
|
|
| **Picklist** | Dropdown from predefined options | N/A |
|
||
|
|
| **Radio Group** | Single selection from exclusive options | `lightning-radio-group` |
|
||
|
|
| **Radio Button Group** | Radio buttons in a styled group | `lightning-radio-group` |
|
||
|
|
| **Rich Text Editor** | Text editor with formatting toolbar | `lightning-input-rich-text` |
|
||
|
|
| **Select** | Native dropdown selection | `lightning-select` |
|
||
|
|
| **Slider** | Numeric range input via draggable handle | `lightning-slider` |
|
||
|
|
| **Textarea** | Multi-line text input | `lightning-textarea` |
|
||
|
|
| **Timepicker** | Time selection interface | `lightning-input` (type="time") |
|
||
|
|
| **Visual Picker** | Visual tile-based selection | N/A |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Layout (12 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ---------------------- | ------------------------------------ | ---------------------- |
|
||
|
|
| **Accordion** | Collapsible stacked sections | `lightning-accordion` |
|
||
|
|
| **Brand Band** | Visual header with branding | `lightning-brand-band` |
|
||
|
|
| **Builder Header** | Header for app builder interfaces | N/A |
|
||
|
|
| **Cards** | Container with header/body/footer | `lightning-card` |
|
||
|
|
| **Carousel** | Slideshow with navigation controls | `lightning-carousel` |
|
||
|
|
| **Docked Form Footer** | Fixed bottom footer for form actions | N/A |
|
||
|
|
| **Expandable Section** | Collapsible content block | N/A |
|
||
|
|
| **Page Headers** | Page title, metadata, and actions | N/A |
|
||
|
|
| **Panels** | Structured side or overlay container | `lightning-panel` |
|
||
|
|
| **Split View** | Resizable two-pane layout | N/A |
|
||
|
|
| **Summary Detail** | Collapsible key-value layout | N/A |
|
||
|
|
| **Tiles** | Card-like grid content items | `lightning-tile` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Navigation (12 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ----------------------- | ------------------------------ | ------------------------------- |
|
||
|
|
| **App Launcher** | Grid for app discovery | N/A |
|
||
|
|
| **Breadcrumbs** | Hierarchical location trail | `lightning-breadcrumbs` |
|
||
|
|
| **Dynamic Menu** | Contextual menu in popover | `lightning-menu` |
|
||
|
|
| **Global Header** | Primary application header | N/A |
|
||
|
|
| **Global Navigation** | Main navigation bar | N/A |
|
||
|
|
| **Menus** | Contextual action lists | `lightning-menu-item` |
|
||
|
|
| **Path** | Linear process stage indicator | N/A |
|
||
|
|
| **Scoped Tabs** | Tabs scoped to a context | `lightning-tabset` |
|
||
|
|
| **Tabs** | Switchable content panels | `lightning-tabset` |
|
||
|
|
| **Trees** | Hierarchical list | `lightning-tree` |
|
||
|
|
| **Vertical Navigation** | Vertical nav menu | `lightning-vertical-navigation` |
|
||
|
|
| **Vertical Tabs** | Vertical tab interface | `lightning-tabset` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Display (9 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| --------------------- | -------------------------------- | ------------------- |
|
||
|
|
| **Activity Timeline** | Chronological event list | N/A |
|
||
|
|
| **Avatar** | User or entity image placeholder | `lightning-avatar` |
|
||
|
|
| **Avatar Group** | Stacked avatar collection | N/A |
|
||
|
|
| **Badges** | Small status label | `lightning-badge` |
|
||
|
|
| **Dynamic Icons** | Animated contextual icons | N/A |
|
||
|
|
| **Files** | File attachment card | N/A |
|
||
|
|
| **Icons** | SVG icons from SLDS sprite | `lightning-icon` |
|
||
|
|
| **Illustration** | Empty/error state graphic | N/A |
|
||
|
|
| **Pills** | Removable tag or filter token | `lightning-pill` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Data (2 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| --------------- | ----------------------- | --------------------- |
|
||
|
|
| **Data Tables** | Sortable tabular data | `lightning-datatable` |
|
||
|
|
| **Tree Grid** | Hierarchical data table | `lightning-tree-grid` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Feedback (9 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ------------------------ | ----------------------------------- | ------------------------------ |
|
||
|
|
| **Alert** | Page-level status banner | N/A |
|
||
|
|
| **Notifications** | System notification messages | N/A |
|
||
|
|
| **Progress Bar** | Linear completion indicator | `lightning-progress-bar` |
|
||
|
|
| **Progress Indicator** | Multi-step process tracker | `lightning-progress-indicator` |
|
||
|
|
| **Progress Ring** | Circular progress indicator | `lightning-progress-ring` |
|
||
|
|
| **Scoped Notifications** | Notification scoped to a container | N/A |
|
||
|
|
| **Spinners** | Loading state indicator | `lightning-spinner` |
|
||
|
|
| **Toast** | Temporary notification message | N/A |
|
||
|
|
| **Trial Bar** | Trial status and call-to-action bar | N/A |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Overlay (6 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ------------------- | -------------------------------------- | ------------------- |
|
||
|
|
| **Docked Composer** | Bottom-docked content creation panel | N/A |
|
||
|
|
| **Modals** | Blocking dialog overlay | N/A |
|
||
|
|
| **Popovers** | Contextual overlay anchored to trigger | N/A |
|
||
|
|
| **Prompt** | Confirmation or input dialog | N/A |
|
||
|
|
| **Tooltips** | Hover-triggered label | N/A |
|
||
|
|
| **Welcome Mat** | Onboarding introduction overlay | N/A |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Complex Components (8 components)
|
||
|
|
|
||
|
|
| Blueprint | Description | Lightning Component |
|
||
|
|
| ------------------- | ------------------------------------- | ------------------------ |
|
||
|
|
| **Chat** | Chronological chat message display | N/A |
|
||
|
|
| **Color Picker** | Color selection with hex/swatch input | N/A |
|
||
|
|
| **Drop Zone** | Drag-and-drop target area | N/A |
|
||
|
|
| **Feeds** | Chronological activity feed | N/A |
|
||
|
|
| **List Builder** | Drag-and-drop list ordering | `lightning-dual-listbox` |
|
||
|
|
| **Map** | Interactive map display | `lightning-map` |
|
||
|
|
| **Publishers** | Content creation panel | N/A |
|
||
|
|
| **Setup Assistant** | Guided onboarding checklist | N/A |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Framework Notes
|
||
|
|
|
||
|
|
- **LWC / Aura**: Prefer the mapped Lightning component when listed — it handles accessibility and events.
|
||
|
|
- **React / Vue / Angular / plain HTML**: Use the blueprint HTML structure and CSS classes directly.
|
||
|
|
- **Customization**: Apply styling hooks (CSS custom properties) to theme components without overriding base styles.
|