- 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
Dialog
Dialogs inform users about a specific task and may contain critical information, or require decisions or acknowledgement.
Backpack/Dialog
Success
Day | Night |
---|---|
Warning
Day | Night |
---|---|
Destructive
Day | Night |
---|---|
Flare
Day | Night |
---|---|
Image
Day | Night |
---|---|
Usage
Example of a success dialog with three buttons
// Basic definition
let iconTemplate = BPKIcon.makeLargeTemplateIcon(name: .tick)
let icon = BPKDialogIconDefinition(icon: iconTemplate, iconBackgroundColor: BPKColor.coreAccentColor)
let dialogController = BPKDialogController(
title: "Title in here",
message: "Description",
iconDefinition: icon,
flareView: nil
)
// Dialog buttons
let confirmation = BPKDialogButtonAction(title: "Confirmation", style: .featured) {_ in
// Handle tap
}
let skip = BPKDialogButtonAction(title: "Skip", style: .secondary) {_ in
// Handle tap
}
let optionalLink = BPKDialogButtonAction(title: "Optional link", style: .link) {_ in
// Handle tap
}
dialogController.addButtonAction(confirmation)
dialogController.addButtonAction(skip)
dialogController.addButtonAction(optionalLink)
// Handling scrim tap
// If you don't set this, the dialog is not dismissed when tapping the scrim
let scrimAction = BPKDialogScrimAction(handler: { (didDismiss) in
print("Scrim tap \(didDismiss ? "dimissing" : "")")
}, shouldDismiss: true)
dialogController.scrimAction = scrimAction
// Show the dialog
self.present(dialogController, animated: true)
Example of a flare dialog
// Flare view
let flareView = BPKFlareView(frame: .zero)
let image = UIImage(named: "dialog_flare")
let imageView = UIImageView.init(image: image)
imageView.contentMode = .scaleAspectFill
imageView.translatesAutoresizingMaskIntoConstraints = false
// Basic definition
let iconTemplate = BPKIcon.makeLargeTemplateIcon(name: .tick)
let icon = BPKDialogIconDefinition(icon: iconTemplate, iconBackgroundColor: BPKColor.coreAccentColor)
let dialogController = BPKDialogController(
title: "Title in here",
message: "Description",
iconDefinition: icon,
flareView: flareView
)
// Dialog buttons
let confirmation = BPKDialogButtonAction(title: "Confirmation", style: .featured) {_ in
// Handle tap
}
let skip = BPKDialogButtonAction(title: "Skip", style: .secondary) {_ in
// Handle tap
}
let optionalLink = BPKDialogButtonAction(title: "Optional link", style: .link) {_ in
// Handle tap
}
dialogController.addButtonAction(confirmation)
dialogController.addButtonAction(skip)
dialogController.addButtonAction(optionalLink)
// Handling scrim tap
// If you don't set this, the dialog is not dismissed when tapping the scrim
let scrimAction = BPKDialogScrimAction(handler: { (didDismiss) in
print("Scrim tap \(didDismiss ? "dimissing" : "")")
}, shouldDismiss: true)
dialogController.scrimAction = scrimAction
// Show the dialog
self.present(dialogController, animated: true)
Example of an image dialog
// Image view
let image = UIImage(named: "dialog_image")
let imageView = UIImageView.init(image: image)
imageView.contentMode = .scaleAspectFill
imageView.translatesAutoresizingMaskIntoConstraints = false
// Basic definition
let iconTemplate = BPKIcon.makeLargeTemplateIcon(name: .tick)
let icon = BPKDialogIconDefinition(icon: iconTemplate, iconBackgroundColor: BPKColor.coreAccentColor)
let dialogController = BPKDialogController(
title: "Title in here",
message: "Description",
imageView: imageView,
textAlignment: .left
)
// Dialog buttons
let confirmation = BPKDialogButtonAction(title: "Confirmation", style: .featured) {_ in
// Handle tap
}
let skip = BPKDialogButtonAction(title: "Skip", style: .secondary) {_ in
// Handle tap
}
let optionalLink = BPKDialogButtonAction(title: "Optional link", style: .link) {_ in
// Handle tap
}
dialogController.addButtonAction(confirmation)
dialogController.addButtonAction(skip)
dialogController.addButtonAction(optionalLink)
// Handling scrim tap
// If you don't set this, the dialog is not dismissed when tapping the scrim
let scrimAction = BPKDialogScrimAction(handler: { (didDismiss) in
print("Scrim tap \(didDismiss ? "dimissing" : "")")
}, shouldDismiss: true)
dialogController.scrimAction = scrimAction
// Show the dialog
self.present(dialogController, animated: true)
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 31, 2022, 13:16