# Review

Customer review component with author, rating, date and review text.

# Most common usage scenario

<template>
  <SfReview
    :author="author"
    :date="date"
    :message="message"
    :max-rating="maxRating"
    :rating="rating"
    :char-limit="charLimit"
    :read-more-text="readMoreText"
    :hide-full-text="hideFullText"
  />
</template>
<script>
import { SfReview } from "@storefront-ui/vue";
export default {
  components: {
    SfReview,
  },
  data() {
    return {
      author: "Jane D.Smith",
      date: "April 2019",
      message:
        "I was looking for a bright light for the kitchen but wanted some item more modern than a strip light. this one is perfect, very bright and looks great. I can comment on interlation as I had an electrition instal it. Would recommend.",
      maxRating: 5,
      rating: 4,
      charLimit: 250,
      readMoreText: "Read more",
      hideFullText: "Read less",
    };
  },
};
</script>

# Props

  • author

    • Author of the review
    • type: string
    • defaultValue: ""
  • date

    • Date of the review
    • type: string
    • defaultValue: ""
  • message

    • Message from the reviewer
    • type: string
    • defaultValue: ""
  • rating

    • Rating from the reviewer
    • type: number|string|boolean
    • defaultValue: false
  • maxRating

    • Max rating for the review
    • type: number|string
    • defaultValue: 5
  • charLimit

    • Char limit for the review
    • type: number|string
    • defaultValue: 250
  • readMoreText

    • Read more text for the review
    • type: string
    • defaultValue: "Read more"
  • hideFullText

    • Hide full text message for the review
    • type: string
    • defaultValue: "Read less"

# Slots

  • author

    • Review author. Slot content will replace default <div> tag (bind 'author' string).
    • bindings: author
  • icon

    • Review icon. Slot content can be replaced by custom icon.
  • info

    • Review information. Slot content will replace default <div> tag and its inner <div> tags (bind 'rating' boolean|number, 'maxRating' number, 'date' string).
    • bindings: rating, maxRating, date
  • message

    • Review message. Slot content will replace default <div> tag and its inner <span> and <a> tags (bind 'finalMessage' computed property, 'buttonText' computed property).
    • bindings: finalMessage, buttonText

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --review-display
  • --review-icon-margin
  • --review-author-color
  • --review-author-font
  • --review-author-font-weight
  • --review-author-font-size
  • --review-author-font-line-height
  • --review-author-font-family
  • --review-author-text-transform
  • --review-rating-display
  • --review-info-margin
  • --review-date-margin
  • --review-date-text-transform
  • --review-date-color
  • --review-date-font
  • --review-date-font-weight
  • --review-date-font-size
  • --review-date-font-line-height
  • --review-date-font-family
  • --review-message-display
  • --review-message-margin
  • --review-message-color
  • --review-message-font
  • --review-message-font-weight
  • --review-message-font-size
  • --review-message-font-line-height
  • --review-message-font-family

# Overridden other components CSS variables

  • --icon-size
  • --icon-color
  • --review-read-more-margin

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.