- 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
- Content
- Accessibility
- Contributing
- Localisation
Star rating
Star Ratings are used for displaying a score within a given range.
Backpack/StarRating
All types
Day | Night |
---|---|
Usage
BPKStarRating contains the Backpack Star rating component which is a view that's rendering star shaped items filled with color to indicate rating from 0.0 to 5.0. It supports three sizes considering the available BPKIcon sizes. By default userInteractionEnabled is set to NO but we can change this value to YES to allow the users to change the rating value by tapping the component
BPKStarRating is a component that's rendering filled satr shaped items. The number of stars depends on the value of the rating attribute. It also supports three sizes, but it doesn't support changing rating by tapping.
Rating Rounding
Use StarRatingRounding to adjust how rating values fill in the stars
- BPKStarRatingRoundingDown rounds down to the next half star. i.e. 3.26 fills in 3 stars
- BPKStarRatingRoundingUp rounds up to the next half star. i.e. 3.26 fills in 3.5 stars
- BPKStarRatingRoundingNearest rounds up/down to the nearest half star. i.e. 3.26 fills in 3.5 stars
Objective-C
Small stars
#import <Backpack/StarRating.h>
BPKStarRating *starRating = [[BPKStarRating alloc] initWithSize:BPKStarSizeSmall];
starRating.rating = 2.5;
// Position star rating with autolayout or other method
Large stars
#import <Backpack/StarRating.h>
BPKStarRating *starRating = [[BPKStarRating alloc] initWithSize:BPKStarSizeLarge];
starRating.rating = 2.5;
// Position star rating with autolayout or other method
Extra Large stars with user interaction
#import <Backpack/StarRating.h>
BPKStarRating *starRating = [[BPKStarRating alloc] initWithSize:BPKStarSizeXLarge];
starRating.rating = 2.5;
starRating.userInteractionEnabled = YES;
// Position star rating with autolayout or other method
Adjust rounding type to control how the half stars are filled in
#import <Backpack/StarRating.h>
BPKStarRating *starRating = [[BPKStarRating alloc] initWithSize:BPKStarSizeXLarge];
starRating.rounding = BPKStarRatingRoundingUp;
starRating.rating = 2.6;
// Position star rating with autolayout or other method
Swift
Small stars
import Backpack
let starRating = BPKStarRating(size: .small)
starRating.rating = 2.5
// Position button with autolayout or other method
Large stars
import Backpack
let starRating = BPKStarRating(size: .large)
starRating.rating = 2.5
// Position button with autolayout or other method
Extra Large stars with user interaction
import Backpack
let starRating = BPKStarRating(size: .xLarge)
starRating.rating = 2.5
starRating.userInteractionEnabled = true
// Position button with autolayout or other method
Adjust rounding type to control how the half stars are filled in
import Backpack
let starRating = BPKStarRating(size: .xLarge)
starRating.rounding = .up
starRating.rating = 2.5
// Position button with autolayout or other method
Hotel Star Rating
Small stars
import Backpack
let hotelStarRating = BPKHotelStarRating(size: .small, rating: 5)
Large stars and Extra Large stars
import Backpack
let hotelStarRating = BPKHotelStarRating(size: .large, rating: 5)
// Size and rating can be changed.
hotelStarRating.size = .xLarge
hotelStarRating.rating = 3
Appearance attributes
BPKStarRating is displaying BPKStarRating views which have the following appearance attributes.
- (UIColor)starFilledColor
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Feb 8, 2023, 09:31