js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #143 from shoelace-style/kj/usage-update

Browse Source 
updated usage example
This commit is contained in:
Cory LaViska
2024-06-21 15:44:15 -04:00
committed by GitHub
parent 18de476ebd 7b1d5d480b
commit 17b5c0b79e
2 changed files with 1 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/components/color-picker.md
View File

@@ -45,7 +45,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
### Swatches
Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including CSS color names), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
Use the `swatches` attribute to add convenient presets to the color picker. Any format the color picker can parse is acceptable (including [CSS color names](https://www.w3schools.com/colors/colors_names.asp)), but each value must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.
```html {.example}
<wa-color-picker

13
docs/docs/usage.md
View File

@@ -22,19 +22,6 @@ Some properties are boolean, so they only have true/false values. To activate a
<wa-button disabled>Click me</wa-button>
```
In rare cases, a property may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` property to an array of colors. This must be done with JavaScript.
```html
<wa-color-picker></wa-color-picker>
<script>
const colorPicker = document.querySelector('wa-color-picker');
colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
</script>
```
Refer to a component's documentation for a complete list of its properties.
## Events
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.