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