- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Star rating
Star Ratings are used for displaying a score within a given range.
Backpack-SwiftUI/StarRating
Day | Night |
---|---|
Usage
To use the star rating component in your code you will need to bind the rating property and set the maxRating property. The maxRating is the maximum number of stars that can be displayed.
Basic star rating
@State var rating: Float = 3.5
BPKStarRating(rating: $rating, maxRating: 5)
Interactive star rating
@State var rating: Float = 3.5
BPKStarRating(rating: $rating, maxRating: 5) { selectedRating in
rating = selectedRating
}
Hotel star rating
@State var hotelRating: Int = 3
BPKHotelStarRating(rating: $hotelRating)
Star rating with Large size
@State var rating: Float = 3.5
BPKStarRating(rating: $rating, maxRating: 5, size: .large)
Customise Rating Rounding
Rounding can be customised by setting the rounding property. The default is .down.
@State var rating: Float = 3.5
BPKStarRating(rating: $rating, maxRating: 5, rounding: .down)
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Apr 28, 2023, 02:20