kopia lustrzana https://github.com/shoelace-style/shoelace
3.2 KiB
3.2 KiB
Rating
[component-header:sl-rating]
Ratings give users a way to quickly view and provide feedback.
<sl-rating></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating />
);
Examples
Maximum Value
Ratings are 0-5 by default. To change the maximum possible value, use the max
attribute.
<sl-rating max="3"></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating max={3} />
);
Precision
Use the precision
attribute to let users select fractional ratings.
<sl-rating precision="0.5" value="2.5"></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating precision={0.5} value={2.5} />
);
Symbol Sizes
Set the --symbol-size
custom property to adjust the size.
<sl-rating style="--symbol-size: 2rem;"></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating style={{ '--symbol-size': '2rem' }} />
);
Readonly
Use the readonly
attribute to display a rating that users can't change.
<sl-rating readonly value="3"></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating readonly value={3} />
);
Disabled
Use the disable
attribute to disable the rating.
<sl-rating disabled value="3"></sl-rating>
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating disabled value={3} />
);
Custom Icons
You can provide custom icons by passing a function to the getSymbol
property.
<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>
import '@shoelace-style/shoelace/dist/components/icon/icon';
import { SlRating } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRating
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 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 getSymbol={getSymbol} />
);
[component-metadata:sl-rating]