shoelace/docs/components/rating.md

80 wiersze
1.6 KiB
Markdown
Czysty Zwykły widok Historia

2020-07-20 10:17:20 +00:00
# Rating
[component-header:sl-rating]
2020-07-20 16:58:05 +00:00
Ratings give users a way to quickly view and provide feedback.
2020-07-20 10:17:20 +00:00
```html preview
<sl-rating></sl-rating>
```
2020-07-20 16:58:05 +00:00
## Examples
### Maximum Value
Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
```html preview
<sl-rating max="3"></sl-rating>
```
### Precision
Use the `precision` attribute to let users select fractional ratings.
```html preview
<sl-rating precision=".5" value="2.5"></sl-rating>
```
## Symbol Sizes
Set the `--symbol-size` custom property to adjust the size.
```html preview
<sl-rating style="--symbol-size: 2rem;"></sl-rating>
```
### Readonly
Use the `readonly` attribute to display a rating that users can't change.
```html preview
<sl-rating readonly value="3"></sl-rating>
```
### Disabled
Use the `disable` attribute to disable the rating.
```html preview
<sl-rating disabled value="3"></sl-rating>
```
### Custom Icons
```html preview
2021-03-06 17:01:39 +00:00
<sl-rating class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
<script>
const rating = document.querySelector('.rating-hearts');
rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>';
</script>
2020-07-20 16:58:05 +00:00
```
### Value-based Icons
```html preview
<sl-rating class="rating-emojis"></sl-rating>
<script>
const rating = document.querySelector('.rating-emojis');
2021-08-18 21:29:59 +00:00
rating.getSymbol = (value) => {
2020-07-20 16:58:05 +00:00
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
2021-08-18 21:29:59 +00:00
return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
2020-07-20 16:58:05 +00:00
};
</script>
```
2020-07-20 10:17:20 +00:00
[component-metadata:sl-rating]