PM7 macOS Design

Golden Standard UI Components

De complete design system voor native macOS SwiftUI apps. Consistente, toegankelijke en mooie UI componenten.

Bekijk ComponentenGitHub
6
Components
Supported
macOS 11.0+
Native
SwiftUI
Accessible
Bomma-proof

Componenten

Alle PM7 Golden Standard UI elementen voor macOS

EditField - Floating Label

Username
Label zweeft omhoog bij focus
Tekst ALTIJD links uitgelijnd
Border kleur verandert bij focus

SwiftUI Code

EditField(label: "Username", text: $username)
    .frame(maxWidth: 320)

// Optional string support
EditField(label: "Email", text: $email)  // Binding<String?>

ModernSlider in SettingCard

Border Width1.5 px
Icon + titel links, waarde rechts
Waarde in monospaced font
ALTIJD in SettingCard wrapper

SwiftUI Code

SettingCard {
    ModernSlider(
        icon: "circle.circle",
        title: "Border Width",
        value: $borderWidth,
        range: 0...3,
        step: 0.5,
        format: { String(format: "%.1f px", $0) }
    )
}

ColorPickerRow in SettingCard

Border Color
Icon + titel links, picker rechts
ColorPicker 60pt breed
ALTIJD in SettingCard wrapper

SwiftUI Code

SettingCard {
    ColorPickerRow(
        icon: "paintbrush",
        title: "Border Color",
        color: $borderColor
    )
}

ModernToggle

Enable Smart Paste
Automatically paste after copying. Your clipboard is preserved.
Icon in accent color
Optionele ondertitel
Native switch style

SwiftUI Code

ModernToggle(
    icon: "doc.on.doc",
    title: "Enable Smart Paste",
    subtitle: "Automatically paste after copying.",
    isOn: $usesSmartPaste
)

DropdownPicker

Theme
Choose your preferred color scheme
Label BOVEN dropdown
Chevron LINKS (niet rechts)
Geen Spacer - blijft links

SwiftUI Code

DropdownPicker(
    title: "Theme",
    subtitle: "Choose your preferred color scheme",
    selection: $theme,
    options: [
        (value: "light", label: "Light"),
        (value: "dark", label: "Dark"),
        (value: "system", label: "System Default")
    ]
)

SettingCard - Wrapper

Content wrapped in SettingCard
Padding: 10pt
Background: separatorColor 30%
Corner radius: 6pt

SwiftUI Code

struct SettingCard<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        content
            .padding(10)
            .background(
                RoundedRectangle(cornerRadius: 6)
                    .fill(Color(NSColor.separatorColor)
                        .opacity(0.3))
            )
    }
}

Design Principes

De fundamentele regels voor PM7 macOS design

Labels BOVEN Velden

Geen tennis-match layout. Labels staan altijd boven de input velden, niet ernaast.

Alles LINKS Uitgelijnd

Geen Spacer() die controls naar rechts duwt. Alles blijft links uitgelijnd.

Bomma-proof Design

Minimum 13pt tekst, 44pt klikgebieden. Toegankelijk voor iedereen.

Native macOS Kleuren

Gebruik NSColor voor automatische light/dark mode ondersteuning.

.help() Tooltips

Elke icon MOET een .help() tooltip hebben voor toegankelijkheid.

.contentShape()

Alle plain buttons krijgen .contentShape(Rectangle()) voor betere hit testing.