BCDel89 Web Components
This is a web component library from BCDel89 that includes the following web-components:
- bcd-rating
- bcd-rating-circle
Installation
<script type="module" src="https://unpkg.com/bcd-web-components@latest/dist/bcd-web-components/bcd-web-components.esm.js"></script>Usage
<script type="module" src="https://unpkg.com/bcd-web-components@latest/dist/bcd-web-components/bcd-web-components.esm.js"></script>
<bcd-rating rating="3" max="5"></bcd-rating>Customization
Web components can be styled using the following CSS variables:
bcd-rating {
--bcd-rating-margin-left: 2px;
--bcd-rating-border-color: #38bbe0;
--bcd-rating-background-fill-color: black;
--bcd-rating-background-empty-color: white;
--bcd-rating-hover-border-color: #30a0c0;
--bcd-rating-size: 15px;
--bcd-rating-border-radius: 50%;
--bcd-rating-border-width: 2px;
--bcd-rating-border-type: solid;
}
bcd-rating-circle {
--bcd-rating-circle-fill-color: #38bbe0;
--bcd-rating-circle-empty-color: rgb(219, 219, 219);
--bcd-rating-circle-bg-color: white;
}Demo
<div>
<bcd-rating rating="3" max="5"></bcd-rating>
</div>
<div>
<bcd-rating rating="8" max="10"></bcd-rating>
</div>
<div>
<bcd-rating rating="6" max="10"></bcd-rating>
</div>
<div>
<bcd-rating rating="5" max="10"></bcd-rating>
</div>
<div>
<bcd-rating rating="1" max="5"></bcd-rating>
</div>
<br> <br> <br>
<div>
<bcd-rating-circle rating="3" max="5" size="xl" fraction="true"></bcd-rating-circle>
<bcd-rating-circle rating="8" max="10" size="lg" fraction="false"></bcd-rating-circle>
<bcd-rating-circle rating="6" max="10" size="md" fraction="true"></bcd-rating-circle>
<bcd-rating-circle rating="5" max="10" size="sm"></bcd-rating-circle>
<bcd-rating-circle rating="1" max="5" size="xs" fraction="true"></bcd-rating-circle>
</div>