| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- /// An interface, consisting of a label and additional content,
- /// that you display when the content of your app is unavailable to users.
- public struct ContentUnavailableView<Label: View, Description: View, Actions: View>: View {
- /// Creates an interface, consisting of a label and additional content,
- /// that you display when the content of your app is unavailable to users.
- ///
- /// - Parameters:
- /// - label: The label that describes the view.
- /// - description: The view giving more information about the reason
- /// for the content being unavailable.
- /// - actions: The view containing actions related to the content being unavailable.
- /// For example "Back to Home", "Login" or "Refresh".
- public init(
- @ViewBuilder label: () -> Label,
- @ViewBuilder description: () -> Description = { EmptyView() },
- @ViewBuilder actions: () -> Actions = { EmptyView() }
- ) {
- self.label = label()
- self.description = description()
- self.actions = actions()
- }
- private var label: Label
- private var description: Description
- private var actions: Actions
- @Environment(\.backend) var backend
- @Environment(\.foregroundColor) var environmentForegroundColor
- var labelFont: Font {
- switch backend.deviceClass.kind {
- case .phone, .tablet, .watch: .title2
- case .tv: .headline
- case .desktop: .largeTitle
- }
- }
- var descriptionFont: Font {
- switch backend.deviceClass.kind {
- case .phone, .tablet, .tv, .watch: .subheadline
- case .desktop: .body
- }
- }
- var labelColor: Color {
- if let environmentForegroundColor { return environmentForegroundColor }
- if backend.deviceClass == .desktop { return .gray }
- return .adaptive(light: .black, dark: .white)
- }
- public var body: some View {
- VStack {
- label
- .font(labelFont)
- .foregroundColor(labelColor)
- description
- .font(descriptionFont)
- .foregroundColor(environmentForegroundColor ?? .gray)
- if backend.deviceClass == .desktop {
- HStack {
- actions
- .font(.body)
- .foregroundColor(
- environmentForegroundColor
- ?? .adaptive(light: .black, dark: .white)
- )
- }
- } else {
- VStack {
- actions
- .font(.body)
- }
- }
- }
- .if(backend.deviceClass != .desktop) { view in
- view.padding(30)
- }
- .if(backend.deviceClass == .desktop) { view in
- view.frame(maxWidth: 360)
- }
- }
- }
|