Checkboxes Popover
Table of Contents
Usage Guidelines
- We will not be able to do multi-color text configurable
- Cards accommodate standard text formatting, alignment and sizing
- Users should use rows and columns to align the cards
- Users have the ability to add a full width image to the top of cards
- Cards can be used in any component
Desktop
- The content in the cards can be formatted like the mockup by adding a fact and setting the style to "Large Value"
- If the content in each card will be more than a few sentences, consider using Accordions - Card Version
WordPress
This component can be added to post content with the Card block in the Gutenberg editor.
Specifications
Properties
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| label | string | Trigger label text | - | - |
| class | string | list of additional classes to apply to main element. | - | - |
Styling
Colors
| Name | Application | Custom Property | Roles | Default Opacity | Description |
|---|---|---|---|---|---|
| bg-color | background | - | surface | - | Note this is for the actual list popover. The trigger button uses same colors as select input |
| text-color | text | - | on-surface | - | |
| checked-color | border | - | primary | - |
Changelog
6.42.0
- checkboxes-popover added
Examples
Default
{% set options = [
{
value: "1",
label: "One"
},
{
value: "2",
label: "Two"
},
{
value: "3",
label: "Three"
},
] %}
<x-checkboxes-popover label="Dropdown" :options="options" />