mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00

Files

Manuel Schmidt 8121faa1d4 Enrich components @summary with description from docs (#962 )

* keep header styles with repositioned description text

* `animated-image` move description to component

* code style

* `avatar` add summary from docs

* `badge` add summary from docs

* `breadcrumb` add summary from docs

* `button` add summary from docs

* lead sentence is now part of the header

* `button-group` add summary from docs

* `card` add summary from docs

* `checkbox` add summary from docs

* `color-picker` add summary from docs

* `details` add summary from docs

* `dialog` add summary from docs

* `divider` add summary from docs

* `drawer` add summary from docs

* `dropdown` add summary from docs

* `format-bytes` add summary from docs

* `format-date` add summary from docs

* `format-number` add summary from docs

* `icon` add summary from docs

* `icon-button` add summary from docs

* `image-comparer` add summary from docs

* `include` add summary from docs

* `input` add summary from docs

* `menu` add summary from docs

* `menu-item` add summary from docs

* `menu-label` add summary from docs

* `popup` add summary from docs

* `progressbar` add summary from docs

* `progress-ring` add summary from docs

* `radio` add summary from docs

* `radio-button` add summary from docs

* `range` add summary from docs

* `rating` add summary from docs

* `relative-time` add summary from docs

* `select` add summary from docs

* `skeleton` add summary from docs

* `spinner` add summary from docs

* `split-panel` add summary from docs

* `switch` add summary from docs

* `tab-group` add summary from docs

* `tag` add summary from docs

* `textarea` add summary from docs

* `tooltip` add summary from docs

* `visually-hidden` add summary from docs

* `animation` add summary from docs

* `breadcrumb-item` add summary from docs

* `mutation-observer` add summary from docs

* `radio-group` add summary from docs

* `resize-observer` add summary from docs

* `tab` add summary from docs

* `tab-panel` add summary from docs

* `tree` add summary from docs

* `tree-item` add summary from docs

* remove `title` for further usage of `Sl` classnames in docs

* revert: use markdown parser for component summary

2022-10-21 09:56:35 -04:00

3.7 KiB

Raw Blame History

Rating

[component-header:sl-rating]

<sl-rating label="Rating"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" />;

Examples

Labels

Ratings are commonly identified contextually, so labels aren't displayed. However, you should always provide one for assistive devices using the label attribute.

<sl-rating label="Rate this component"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rate this component" />;

Maximum Value

Ratings are 0-5 by default. To change the maximum possible value, use the max attribute.

<sl-rating label="Rating" max="3"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" max={3} />;

Precision

Use the precision attribute to let users select fractional ratings.

<sl-rating label="Rating" precision="0.5" value="2.5"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;

Symbol Sizes

Set the --symbol-size custom property to adjust the size.

<sl-rating label="Rating" style="--symbol-size: 2rem;"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;

Readonly

Use the readonly attribute to display a rating that users can't change.

<sl-rating label="Rating" readonly value="3"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" readonly value={3} />;

Disabled

Use the disable attribute to disable the rating.

<sl-rating label="Rating" disabled value="3"></sl-rating>

import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlRating label="Rating" disabled value={3} />;

Custom Icons

You can provide custom icons by passing a function to the getSymbol property.

<sl-rating label="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>

import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRating
    label="Rating"
    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
    style={{ '--symbol-color-active': '#ff4136' }}
  />
);

Value-based Icons

You can also use the getSymbol property to render different icons based on value.

<sl-rating label="Rating" class="rating-emojis"></sl-rating>

<script>
  const rating = document.querySelector('.rating-emojis');

  rating.getSymbol = value => {
    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
  };
</script>

import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';

function getSymbol(value) {
  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
}

const App = () => <SlRating label="Rating" getSymbol={getSymbol} />;

[component-metadata:sl-rating]

3.7 KiB Raw Blame History