mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Add label attribute to option & menu-item (#704)
* Add `label` attribute and `defaultLabel` getter to option and menu-item, drop `getTextLabel()` - Add `label` attribute to option and menu-item, closes #698 - [Option] Add `defaultLabel` cached property to both - [Option] Remove `getTextLabel()` method from both (people can just set `el.label`) - Refactor: Merge utils to get text content into one more powerful utility function - Fixed typo in `slot.ts` . Add `label` attribute to menu, remove `getTextLabel` * Update filename
This commit is contained in:
@@ -130,6 +130,15 @@ Note that multi-select options may wrap, causing the control to expand verticall
|
||||
|
||||
Use the `value` attribute to set the initial selection.
|
||||
|
||||
```html {.example}
|
||||
<wa-select value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
|
||||
|
||||
```html {.example}
|
||||
@@ -294,7 +303,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
|
||||
return `
|
||||
<wa-tag removable>
|
||||
<wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
|
||||
${option.getTextLabel()}
|
||||
${option.label}
|
||||
</wa-tag>
|
||||
`;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user