Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

Rating

The Rating component is a basic component for displaying a star rating. It can be accompanied by an optional text.

Properties

stars

number

required

Number of stars to render

text

string | undefined

An optional text to explain the rating

testID

string | undefined

testID

accessibilityLabel

string | undefined

Accessibility label

starsDistance

number | undefined

Distance between stars

color

string | undefined

Color of the stars when they are active

Basic usage



4 Opinions





19 Opinions

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpRating stars={2} text="4 Opinions" />
  <DpRating stars={4.2} text="19 Opinions" />
</View>

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpRating stars={2} text="4 Opinions" />
  <DpRating stars={4.2} text="19 Opinions" />
</View>

Variants







6 Opinions (With half star)



10 Opinions



5 Opinions







9 Opinions (With half star)



3 Opinions



99 Opinions

<View>
  <DpRating stars={1.2} text="6 Opinions (With half star)" />
  <DpRating stars={2} text="10 Opinions" />
  <DpRating stars={3} text="5 Opinions" />
  <DpRating stars={2.5} text="9 Opinions (With half star)" />
  <DpRating stars={4} text="3 Opinions" />
  <DpRating stars={5} text="99 Opinions" />
</View>

<View>
  <DpRating stars={1.2} text="6 Opinions (With half star)" />
  <DpRating stars={2} text="10 Opinions" />
  <DpRating stars={3} text="5 Opinions" />
  <DpRating stars={2.5} text="9 Opinions (With half star)" />
  <DpRating stars={4} text="3 Opinions" />
  <DpRating stars={5} text="99 Opinions" />
</View>



6 Opinions (With 5 stars) and distance

<View>
  <DpRating
    stars={5}
    text="6 Opinions (With 5 stars) and distance"
    starsDistance={5}
  />
</View>

<View>
  <DpRating
    stars={5}
    text="6 Opinions (With 5 stars) and distance"
    starsDistance={5}
  />
</View>

Docplanner Mobile UI

Rating

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

Variants

Properties