Add a star

This function creates an HTML tag with the appropriate number of stars, as well as an accessibility label.

fivestars(
  rating,
  label = round(rating, 1),
  aria_label = paste("The rating is", round(rating, 1), "out of five stars"),
  label_pos = "left",
  star_size = NULL,
  star_color = NULL,
  star_background = NULL
)

Arguments

rating	rating out of five
label	text to display in tag, defaults to the rating rounded to one decimal place
aria_label	accessibility label for text
label_pos	"left" or "right" - position of label relative to stars
star_size	CSS font-size for star background, default is to inherit from use_fivestars()
star_color	CSS colour for stars, default is to inherit from use_fivestars()
star_background	CSS colour for star background, default is to inherit from use_fivestars()

Value

an html tag that renders a star rating out of five

Examples

use_fivestars()
#> <style>:root {
#>   --star-size: larger;
#>   --star-background: #999;
#>   --star-color: #fc0;
#> }
#>         
#> .fivestars {
#>   --percent: calc(var(--rating)/5 * 100%);
#>   /* display: inline-block; */
#>   font-size: var(--star-size);
#>   line-height: 1;
#> }
#> 
#> .fivestars::before {
#>   content: '\2605\2605\2605\2605\2605';
#>   background: linear-gradient(90deg, var(--star-color) var(--percent), 
#>                               var(--star-background) var(--percent));
#>   -webkit-background-clip: text;
#>   -webkit-text-fill-color: transparent;
#> }</style>
fivestars(3.5)
#> <div>
#>   3.5
#>   <span class="fivestars" style="--rating: 3.5;" aria-label="The rating is 3.5 out of five stars"></span>
#> </div>