TUIkit/docs/api/data/documentation/tuikit/modifiers.json

{"kind":"article","schemaVersion":{"patch":0,"major":0,"minor":3},"sections":[],"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","interfaceLanguage":"swift"},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"abstract":[{"text":"Learn how to use modifiers to customize the appearance and behavior of views.","type":"text"}],"primaryContentSections":[{"content":[{"level":2,"anchor":"Overview","text":"Overview","type":"heading"},{"inlineContent":[{"text":"Modifiers are methods that return a modified copy of a view. Chain them together to build complex layouts and styling:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Hello\")","    .bold()","    .foregroundColor(.theme.accent)","    .padding(1)","    .border(.rounded)"],"type":"codeListing"},{"level":2,"anchor":"Layout-Modifiers","text":"Layout Modifiers","type":"heading"},{"level":3,"anchor":"padding","text":"padding(_:)","type":"heading"},{"inlineContent":[{"text":"Add padding around content:","type":"text"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Content\")","    .padding()          \/\/ Default 1 unit","    .padding(2)         \/\/ 2 units all sides","    .padding(.top, 1)   \/\/ 1 unit top","    .padding(.horizontal, 2)  \/\/ 2 units left\/right"],"type":"codeListing"},{"level":3,"anchor":"framewidthheightalignment","text":"frame(width:height:alignment:)","type":"heading"},{"inlineContent":[{"type":"text","text":"Set fixed size:"}],"type":"paragraph"},{"syntax":"swift","code":["Text(\"Fixed\")","    .frame(width: 20, height: 5)","","Button(\"Button\")","    .frame(width: 15)"],"type":"codeListing"},{"level":3,"anchor":"frameminWidthmaxWidthminHeightmaxHeight","text":"frame(minWidth:maxWidth:minHeight:maxHeight:)","type":"heading"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Set flexible size constraints:"}]},{"type":"codeListing","code":["Text(\"Flexible\")","    .frame(minWidth: 10, maxWidth: 50)","    .frame(minHeight: 3, maxHeight: 10)","","Text(\"Fill available space\")","    .frame(maxWidth: .infinity, maxHeight: .infinity)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Color Modifiers","anchor":"Color-Modifiers"},{"level":3,"type":"heading","text":"foregroundColor(_:)","anchor":"foregroundColor"},{"type":"paragraph","inlineContent":[{"text":"Set text color:","type":"text"}]},{"type":"codeListing","code":["Text(\"Colored\")","    .foregroundColor(.theme.accent)","","Text(\"Green\")","    .foregroundColor(.ansi(.brightGreen))","","Text(\"Custom\")","    .foregroundColor(.hex(\"FF5500\"))"],"syntax":"swift"},{"level":3,"type":"heading","text":"background(_:)","anchor":"background"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add background color:"}]},{"type":"codeListing","code":["Text(\"Background\")","    .background(.theme.accent)","    .foregroundColor(.theme.background)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Text Styling","anchor":"Text-Styling"},{"level":3,"type":"heading","text":"Bold, Italic, Underline","anchor":"Bold-Italic-Underline"},{"type":"codeListing","code":["Text(\"Bold\").bold()","Text(\"Italic\").italic()","Text(\"Underline\").underlined()","Text(\"Strikethrough\").strikethrough()","Text(\"Dim\").dimmed()","Text(\"Blinking\").blinking()","Text(\"Inverted\").inverted()"],"syntax":"swift"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Combine multiple modifiers:"}]},{"type":"codeListing","code":["Text(\"Complex\")","    .bold()","    .italic()","    .foregroundColor(.theme.accent)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Border and Structure","anchor":"Border-and-Structure"},{"level":3,"type":"heading","text":"border(_:)","anchor":"border"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Add borders with different styles:"}]},{"type":"codeListing","code":["Text(\"Bordered\")","    .border(.rounded)","","Text(\"Heavy border\")","    .border(.heavy, width: 2)","","VStack {","    Text(\"Content\")","}",".border(.block, color: .theme.accent)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Overlay and Compositing","anchor":"Overlay-and-Compositing"},{"level":3,"type":"heading","text":"overlay(_:)","anchor":"overlay"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Layer content on top:"}]},{"type":"codeListing","code":["Text(\"Background\")","    .overlay {","        Text(\"Foreground\")","    }"],"syntax":"swift"},{"level":3,"type":"heading","text":"dimmed()","anchor":"dimmed"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Reduce visual emphasis:"}]},{"type":"codeListing","code":["VStack {","    Text(\"Normal\")","    Text(\"Dimmed\")","        .dimmed()","}"],"syntax":"swift"},{"level":3,"type":"heading","text":"modal()","anchor":"modal"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Combine dimmed + centered overlay:"}]},{"type":"codeListing","code":["showAlert {","    Alert(title: \"Alert\", message: \"Message\")","        .modal()","}"],"syntax":"swift"},{"level":2,"type":"heading","text":"Event Modifiers","anchor":"Event-Modifiers"},{"level":3,"type":"heading","text":"onKeyPress(_:)","anchor":"onKeyPress"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Handle keyboard input:"}]},{"type":"codeListing","code":["VStack {","    ContentView()","}",".onKeyPress { event in","    if event.key == .character(\"q\") {","        \/\/ Quit","        return true","    }","    return false","}"],"syntax":"swift"},{"level":3,"type":"heading","text":"onAppear(_:)","anchor":"onAppear"},{"type":"paragraph","inlineContent":[{"text":"Run code when view appears:","type":"text"}]},{"type":"codeListing","code":["Text(\"Content\")","    .onAppear {","        print(\"View appeared\")","    }"],"syntax":"swift"},{"level":3,"type":"heading","text":"onDisappear(_:)","anchor":"onDisappear"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run code when view disappears:"}]},{"type":"codeListing","code":["Text(\"Content\")","    .onDisappear {","        print(\"View disappearing\")","    }"],"syntax":"swift"},{"level":3,"type":"heading","text":"task(_:)","anchor":"task"},{"type":"paragraph","inlineContent":[{"type":"text","text":"Run async code:"}]},{"type":"codeListing","code":["VStack {","    ContentView()","}",".task {","    \/\/ Fetch data","    let data = try await fetchData()","}"],"syntax":"swift"},{"level":2,"type":"heading","text":"Data Flow Modifiers","anchor":"Data-Flow-Modifiers"},{"level":3,"type":"heading","text":"environment(::)","anchor":"environment"},{"type":"paragraph","inlineContent":[{"text":"Pass environment values to children:","type":"text"}]},{"type":"codeListing","code":["VStack {","    ContentView()","}",".environment(\\.theme, customTheme)"],"syntax":"swift"},{"level":3,"type":"heading","text":"statusBarItems(_:)","anchor":"statusBarItems"},{"type":"paragraph","inlineContent":[{"text":"Define status bar items:","type":"text"}]},{"type":"codeListing","code":["VStack {","    ContentView()","}",".statusBarItems {","    StatusBarItem(","        label: \"Help\",","        shortcut: Shortcut.letter(\"?\"),","        action: { print(\"Help\") }","    )","}"],"syntax":"swift"},{"level":2,"type":"heading","text":"Combining Modifiers","anchor":"Combining-Modifiers"},{"type":"paragraph","inlineContent":[{"text":"Modifiers are applied in order—the order matters:","type":"text"}]},{"type":"codeListing","code":["\/\/ This looks different...","Text(\"Order matters\")","    .foregroundColor(.theme.accent)","    .padding(1)","    .border(.rounded)","","\/\/ ...than this","Text(\"Order matters\")","    .border(.rounded)","    .padding(1)","    .foregroundColor(.theme.accent)"],"syntax":"swift"},{"level":3,"type":"heading","text":"Creating Custom Modifiers","anchor":"Creating-Custom-Modifiers"},{"type":"paragraph","inlineContent":[{"text":"Create reusable modifiers:","type":"text"}]},{"type":"codeListing","code":["struct PrimaryButtonStyle: ViewModifier {","    func body(content: Content) -> some View {","        content","            .bold()","            .foregroundColor(.theme.background)","            .background(.theme.accent)","            .padding(1)","            .border(.rounded)","    }","}","","extension View {","    func primaryButton() -> some View {","        modifier(PrimaryButtonStyle())","    }","}","","\/\/ Usage","Button(\"Click\") { }","    .primaryButton()"],"syntax":"swift"},{"level":2,"type":"heading","text":"Common Patterns","anchor":"Common-Patterns"},{"level":3,"type":"heading","text":"Centered Text","anchor":"Centered-Text"},{"type":"codeListing","code":["Text(\"Centered\")","    .frame(maxWidth: .infinity, alignment: .center)"],"syntax":"swift"},{"level":3,"type":"heading","text":"Full-Size Container","anchor":"Full-Size-Container"},{"type":"codeListing","code":["VStack {","    ContentView()","}",".frame(maxWidth: .infinity, maxHeight: .infinity)"],"syntax":"swift"},{"level":3,"type":"heading","text":"Bordered Section","anchor":"Bordered-Section"},{"type":"codeListing","code":["VStack(spacing: 1) {","    Text(\"Title\").bold()","    ContentView()","}",".padding(1)",".border(.rounded)"],"syntax":"swift"},{"level":3,"type":"heading","text":"Button Row","anchor":"Button-Row"},{"type":"codeListing","code":["HStack(spacing: 2) {","    Button(\"OK\") { }","    Button(\"Cancel\") { }","}",".frame(maxWidth: .infinity, alignment: .trailing)"],"syntax":"swift"},{"level":2,"type":"heading","text":"Related Topics","anchor":"Related-Topics"},{"type":"unorderedList","items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"ViewModifier","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/padding(_:)-19gu9"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/frame(width:height:alignment:)"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/border(_:style:)-4xzvw"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/background(_:)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"codeVoice","code":"View\/foregroundColor(_:)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"code":"View\/overlay(alignment:content:)","type":"codeVoice"}]}]},{"content":[{"inlineContent":[{"type":"codeVoice","code":"View\/onKeyPress(_:)"}],"type":"paragraph"}]}]}],"kind":"content"}],"metadata":{"title":"View Modifiers","roleHeading":"Article","role":"article"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","role":"collection","type":"topic","title":"TUIKit","kind":"article","url":"\/documentation\/tuikit","abstract":[]}}}