format project
This commit is contained in:
parent
7651afaa0b
commit
a6d4064af8
83 changed files with 942 additions and 536 deletions
|
|
@ -1,30 +1,35 @@
|
|||
### rating
|
||||
|
||||
Rating is a set of radio buttons that allow the user to rate something
|
||||
|
||||
[rating docs](https://daisyui.com/components/rating/)
|
||||
|
||||
#### Class names
|
||||
|
||||
- component: `rating`
|
||||
- modifier: `rating-half`, `rating-hidden`
|
||||
- size: `rating-xs`, `rating-sm`, `rating-md`, `rating-lg`, `rating-xl`
|
||||
|
||||
#### Syntax
|
||||
|
||||
```html
|
||||
<div class="rating {MODIFIER}">
|
||||
<input type="radio" name="rating-1" class="mask mask-star" />
|
||||
<input type="radio" name="rating-1" class="mask mask-star" />
|
||||
</div>
|
||||
```
|
||||
|
||||
For a read-only (non-interactive) rating, use `<div>` elements instead of radio inputs and mark the selected one with `aria-current="true"`:
|
||||
|
||||
```html
|
||||
<div class="rating">
|
||||
<div class="mask mask-star" aria-label="1 star"></div>
|
||||
<div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
|
||||
<div class="mask mask-star" aria-label="3 star"></div>
|
||||
<div class="mask mask-star" aria-label="1 star"></div>
|
||||
<div class="mask mask-star" aria-label="2 star" aria-current="true"></div>
|
||||
<div class="mask mask-star" aria-label="3 star"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Rules
|
||||
|
||||
- {MODIFIER} is optional and can have one of the modifier/size class names
|
||||
- Each set of rating inputs should have unique `name` attributes to avoid conflicts with other ratings on the same page
|
||||
- Add `rating-hidden` for the first radio to make it hidden so user can clear the rating
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue