@advanced-rest-client/star-rating
Advanced tools
Use the @anypoint-web-components/awc module instead.
A component that renders stars for rating.
<star-rating value="3"></star-rating>
<star-rating value="4" readonly></star-rating>
Element can be styled using CSS variables
<star-rating class="theme-blue" value="3"></star-rating>
<style>
.theme-blue {
--star-rating-unselected-color: #BBDEFB;
--star-rating-selected-color: #1565C0;
--star-rating-active-color: #2196F3;
}
</style>
npm install --save @advanced-rest-client/star-rating
<html>
<head>
<script type="module">
import './node_odules/@advanced-rest-client/star-rating/star-rating.js';
</script>
</head>
<body>
<label id="ratingLabel">My rating</label>
<star-rating value="2" arial-labelledby="ratingLabel"></star-rating>
<script>
{
document.querySelector('star-rating').onchange = (e) => {
console.log(`New rating is ${e.target.value}`);
};
}
</script>
</body>
</html>
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/star-rating/star-rating.js';
class SampleElement extends LitElement {
static get properties() {
return {
rating: { type: Number }
}
}
_ratingChanged(e) {
this.rating = e.target.value;
}
render() {
return html`
<star-rating .value="${this.rating}" @value-changed="${this._ratingChanged}"></star-rating>
`;
}
}
customElements.define('sample-element', SampleElement);
import { PolymerElement, html } from '@polymer/polymer';
import '@advanced-rest-client/star-rating/star-rating.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<star-rating value="{{rating}}"></star-rating>
`;
}
}
customElements.define('sample-element', SampleElement);
git clone https://github.com/advanced-rest-client/star-rating
cd star-rating
npm install
npm start
npm test
FAQs
Star rating component
We found that @advanced-rest-client/star-rating demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.