평점 표현 하기 - Starability 라이브러리

블로그나 영화, 음악 등 정보를 보고 가입자가 평가하는 방법으로 댓글을 남기거나 평점을 매깁니다.

평점의 스케일을 표현하는 방법은 다양하지만 가장 일반적인 방법으로 별(star) 표시를 하는 라이브러리를 소개하고자 합니다.

 

starability.css  - Accessible rating with animations on top

https://github.com/LunarLogic/starability

GitHub - LunarLogic/starability: Accessible rating forms with cute animations on top.

HTML과 CSS 만으로 만들어 졌으며, 9개의 애니메이션 타입이 있고 반응형을 지원합니다.

애니메이션 타입중에 원하는 것을 골라서 사용하면 됩니다.

예시로 starability-basic 을 사용해 보겠습니다.

 

사이트에서 사용하는 방법은 아래와 같이 두가지 경우가 있습니다.

• 사용자가 평점 선택자로 평점을 줄 때
• 평점을 표시하는 페이지에서 사용

 

1.  정적평가 결과 표시

필요한 곳에 등급의 정적 결과를 추가할 수 있습니다. 추가된 별 수를 표시하려면 data-rating클래스를 사용하여 요소의 값을 변경하면 됩니다. 

starability-result 는 정수만 지원한다는 점이 제한적입니다. 결과를 부동 소수점 숫자로 표시하려면 다른 솔루션을 사용해야 할 수도 있습니다. 

  <h3>Rated element name</h3>
  <p class="starability-result" data-rating="3">
    Rated: 3 stars
  </p>

2. CSS 파일 사용하기

베이직 타입을 사용하려면 github starability 에 있는 starability-css 폴더에서 starability-basic.css 파일을 복사하여 프로젝트의 public 폴더내에 넣고 사용합니다.

<link rel="stylesheet" href="/stylesheets/starability-basic.css" />

아래와 같이 실제 평점 표시를 적용해 봅니다.

    <% for (let review of campground.reviews) { %>
    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title"><%=review.author.username %></h5>
        <!-- <h3>Rated element name</h3> -->
        <p class="starability-result" data-rating="<%= review.rating %>">
          Rated: <%= review.rating %> stars
        </p>
        <h6 class="card-subtitle mb-2 text-muted">
          <!-- By <%=review.author.username %> -->
        </h6>
        <p class="card-text">Review: <%= review.body %></p>
        <% if (currentUser && review.author.equals(currentUser._id)) { %>
        <form
          action="/campgrounds/<%= campground._id %>/reviews/<%= review._id %>?_method=DELETE"
          method="POST"
        >
          <button class="btn btn-sm btn-danger">Delete</button>
        </form>
        <% } %>

starability 라이브러리 사용 예시