logo
English

导航菜单

Documents

Review Component

Component for displaying user reviews with ratings, comments, user information and verification status. Suitable for e-commerce product pages, service reviews, content comments and other scenarios.

Design Philosophy

  • Clear Information Hierarchy - Layered display of ratings, user information, and comment content
  • Trust Building - Establish trust through verification badges and authentic user information
  • Visual Friendly - Reasonable spacing and typography for easy reading
  • Flexible Configuration - Support for multiple display modes and custom styles

Examples

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

Props

avatar

User avatar URL, supports image links. When not provided, the component will display the first letter of the user name as the default avatar.

王先生

王先生

已认证

非常满意，超出预期！

2024/01/08

李

李女士

已认证

整体不错，服务态度很好，推荐购买。

2024/01/10

?

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-08"
  verified={true}
  avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
  date="2024-01-10"
  verified={true}
/>

<template>
  <Review
    userName="王先生"
    :rating="5"
    comment="非常满意，超出预期！"
    date="2024-01-08"
    :verified="true"
    avatar="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

class

Custom CSS class name for overriding default styles.

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

赵

赵女士

质量很好，包装精美，值得推荐。

2024/01/05

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="产品非常好用，质量很棒！推荐购买。"
  date="2024-01-15"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="赵女士"
  rating={4}
  comment="质量很好，包装精美，值得推荐。"
  date="2024-01-05"
  class="cosy:border-2 cosy:border-primary cosy:rounded-xl"
/>

comment

Comment content, supports both short and long comment display.

王

王先生

很好！

2024/01/08

李

李女士

已认证

这个产品真的很不错，质量超出了我的预期。包装精美，物流也很快，客服态度也很好。虽然价格稍微贵了一点，但是性价比还是很高的。推荐给需要的朋友们！

2024/01/10

---



import { Review } from "@coffic/cosy-ui";
---

<Review userName="王先生" rating={5} comment="很好！" date="2024-01-08" />

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="这个产品真的很不错，质量超出了我的预期。包装精美，物流也很快，客服态度也很好。虽然价格稍微贵了一点，但是性价比还是很高的。推荐给需要的朋友们！"
  date="2024-01-10"
  verified={true}
/>

date

Review date, supports string format dates. The component will automatically format the display.

张

张先生

产品非常好用，质量很棒！推荐购买。

2024/01/15

李

李女士

整体不错，服务态度很好，推荐购买。

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="产品非常好用，质量很棒！推荐购买。"
  date="2024-01-15"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
/>

muted

Whether to use muted style (inactive state).

张

张三

已认证

这个产品非常好用，质量很棒！

2024/01/15

张

张三

已认证

这个产品非常好用，质量很棒！

2024/01/15

?

?

---



import { Review } from "@coffic/cosy-ui";
---

<Review
    userName="张三"
    rating={4}
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    verified
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
    userName="张三"
    rating={4}
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    verified
    muted
/>

<template>
  <Review
    userName="张三"
    :rating="4"
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    :verified="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

<template>
  <Review
    userName="张三"
    :rating="4"
    comment="这个产品非常好用，质量很棒！"
    date="2024-01-15"
    :verified="true"
    :muted="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

rating

Rating, value range 1-5, supports integers and decimals. The component will display corresponding star ratings.

王

王先生

不太满意，质量一般。

2024/01/08

李

李女士

还可以，中规中矩。

2024/01/10

张

张先生

已认证

非常满意，超出预期！

2024/01/15

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={1}
  comment="不太满意，质量一般。"
  date="2024-01-08"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={3}
  comment="还可以，中规中矩。"
  date="2024-01-10"
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-15"
  verified={true}
/>

userName

User name, supports both Chinese and English name display.

张

张三

质量不错，推荐购买。

2024/01/08

J

John Smith

已认证

Excellent product, highly recommended!

2024/01/10

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="张三"
  rating={4}
  comment="质量不错，推荐购买。"
  date="2024-01-08"
/>

---
import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="John Smith"
  rating={5}
  comment="Excellent product, highly recommended!"
  date="2024-01-10"
  verified={true}
/>

verified

Whether the user is verified, displays verification badge when set to true.

李

李女士

已认证

整体不错，服务态度很好，推荐购买。

2024/01/10

王

王先生

非常满意，超出预期！

2024/01/08

?

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="李女士"
  rating={4}
  comment="整体不错，服务态度很好，推荐购买。"
  date="2024-01-10"
  verified={true}
/>

---



import { Review } from "@coffic/cosy-ui";
---

<Review
  userName="王先生"
  rating={5}
  comment="非常满意，超出预期！"
  date="2024-01-08"
  verified={false}
/>

<template>
  <Review
    userName="李女士"
    :rating="4"
    comment="整体不错，服务态度很好，推荐购买。"
    date="2024-01-10"
    :verified="true" />
</template>

<script setup lang="ts">
  import { Review } from '@coffic/cosy-ui/vue';
</script>

Slots

Slot NameDescription
defaultDefault slot for custom content

搜索