### Start Phoenix Server
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/util/tutorial_repo_base/lvn_tutorial_backend/README.md
Instructions to set up dependencies and start the Phoenix server for the project.
```bash
mix setup
mix phx.server
```
--------------------------------
### Start Phoenix Server in IEx
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/util/tutorial_repo_base/lvn_tutorial_backend/README.md
Alternative method to start the Phoenix endpoint within an IEx session.
```bash
iex -S mix phx.server
```
--------------------------------
### Connect LiveView to Localhost
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/LiveViewNative.md
Create a LiveView instance and pass the URL of your Phoenix server. This example connects to localhost.
```swift
import SwiftUI
import LiveViewNative
struct ContentView: View {
var body: some View {
LiveView(.localhost)
}
}
```
--------------------------------
### Example Stylesheet Modifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
This is an example of how a modifier might appear in a stylesheet.
```swift
foregroundStyle(Color.red)
```
--------------------------------
### Configure LiveView Module for SwiftUI
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/README.md
Example of how to configure a LiveView module to use LiveViewNative with the SwiftUI format.
```elixir
defmodule MyDemoWeb.HomeLive do
use MyDemoWeb, :live_view
use MyDemoNative, :live_view
end
```
--------------------------------
### Generate LiveView for SwiftUI
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/README.md
Example output from the Mix task for generating a LiveView module and its corresponding SwiftUI template.
```bash
> mix lvn.gen.live swiftui Home
* creating lib/my_demo_web/live/home_live.swiftui.ex
* creating lib/my_demo_web/live/swiftui/home_live.swiftui.neex
```
--------------------------------
### Display a LiveView with Localhost
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/GettingStarted.md
Use a LiveView with the default localhost host to display a LiveView in your app. No additional setup is required.
```swift
@MainActor
struct ContentView: View {
var body: some View {
LiveView(.localhost)
}
}
```
--------------------------------
### SwiftUI Stylesheet for Custom Video Type
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Stylesheet examples demonstrating how to use the custom `Video` type, with both static and dynamic attribute references for its properties.
```swift
// stylesheet:
backgroundVideo(Video("...", in: 1080))
backgroundVideo(Video(attr("url"), in: attr("resolution")))
```
--------------------------------
### Add live_view_native_swiftui to Mix Dependencies
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/README.md
Install the LiveViewNative SwiftUI package by adding it to your project's dependencies in mix.exs.
```elixir
def deps do
[
{:live_view_native_swiftui, "~> 0.4.0-rc.0"}
]
end
```
--------------------------------
### HTML Example for Custom Element with Attributes
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Example of how to use a custom element with attributes in HTML. The `item:count` attribute demonstrates the use of a namespace and custom name defined with `@LiveAttribute`.
```html
= {
var config = LiveSessionConfiguration()
config.navigationMode = .enabled
return LiveSessionCoordinator(URL(string: "http://localhost:4000/")!, config: config)
}()
var body: some View {
LiveView(
.localhost,
configuration: LiveSessionConfiguration(navigationMode: .enabled)
)
}
}
```
--------------------------------
### SwiftUI Stylesheet for FillBackgroundModifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Examples of using the `fillBackground` modifier in a stylesheet with both static and dynamic (using `attr`) fill styles.
```swift
// stylesheet:
fillBackground(.regularMaterial)
fillBackground(.red.opacity(attr("opacity")))
```
--------------------------------
### HTML Element for LabeledModifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
An example HTML element with a 'label' attribute, corresponding to the `LabeledModifier` usage.
```html
Nested Content
```
--------------------------------
### JSON Representation of Modifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
This JSON structure represents the 'foregroundStyle' modifier from the stylesheet example.
```json
["foregroundStyle", { ... }, [[ ".", { ... }, ["Color", "red"]]]]
```
--------------------------------
### Elixir Stylesheet for LabeledModifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Example of how to use the `labeled` modifier in an Elixir stylesheet, referencing an attribute named 'label'.
```elixir
"my-title" do
labeled(as: attr("label"))
end
```
--------------------------------
### Configure RenameButton with RenameActionModifier
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/Controls and Indicators/RenameButton.md
Use the RenameActionModifier to set the event and target for the rename action when the RenameButton is pressed. This example shows how to configure a button to begin a rename operation targeting the current component.
```html
` and can be any tappable element, such as ``.
```heex
Edit Actions
Arrange
Update
Remove
```
--------------------------------
### Configure LiveView with Custom Addons
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Include your custom addon in the `addons` list when configuring your LiveView. This makes the custom elements defined within the addon available to your LiveView.
```swift
#LiveView(
.localhost,
addons: [.myAddon]
)
```
--------------------------------
### Support Custom Elements with a Registry
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/GettingStarted.md
Enable support for custom HTML elements by implementing the CustomRegistry protocol and providing it as a generic type to the LiveView.
```swift
@MainActor
struct ContentView: View {
var body: some View {
LiveView(.localhost)
}
}
```
--------------------------------
### Stylesheet Usage with Multiple Initializers
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Demonstrates how to use the 'labeled' modifier with different initializers defined in the LabeledModifier struct.
```swift
labeled(as: 5)
labeled(as: "Label")
```
--------------------------------
### Define a Custom Addon
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Create a type that uses the @Addon macro and include it in your LiveView's addons list to enable custom functionality.
```swift
public extension Addons {
@Addon
struct MyAddon {
// ...
}
}
```
--------------------------------
### LiveView Module with SwiftUI Formats and Layouts
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/README.md
Configure a LiveView module to use LiveViewNative with specific formats and layouts for SwiftUI rendering.
```elixir
defmodule MyAppWeb.HomeLive do
use MyAppWeb :live_view
use LiveViewNative.LiveView,
formats: [:swiftui],
layouts: [
swiftui: {MyAppWeb.Layouts.SwiftUI, :app}
]
end
```
--------------------------------
### Configure Frame with Minimum and Maximum Dimensions
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
Use 'min_width', 'max_width', 'min_height', and 'max_height' within the 'frame' modifier to define size constraints. Alignment can also be set.
```html
"
}
```
--------------------------------
### Specifying Colors
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
Details on how to specify colors for various attributes.
```APIDOC
## Specifying Colors
Any attribute that accepts a color can be provided with:
- a CSS-style hexadecimal RGB color (e.g. `#ff33cc`)
- a named SwiftUI system color (prefix the SwiftUI property name with `system-`, e.g., `system-aqua` or `system-accent`)
```
--------------------------------
### LiveView Native Push Navigate Event
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/guides/architecture/navigation.md
Handles 'live_redirect' events, supporting both 'push' and 'replace' navigation kinds. Closes the current channel and opens a new one on the same socket.
```json
"live_redirect": {
"kind": "",
"to": ""
}
```
--------------------------------
### Using ContainerRelativeShape
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/Shapes/ContainerRelativeShape.md
Demonstrates how to use ContainerRelativeShape with a fill color. Ensure ContainerShapeModifier is used to apply the shape.
```html
: View {
private var count: Int = 0
var body: some View {
$liveElement.children()
Text("Value: \(count)")
Button("Increment") {
Task {
try await $liveElement.context.coordinator.pushEvent(
type: "click",
event: "increment",
value: count + 1,
target: nil
)
}
}
}
}
```
--------------------------------
### LiveView Native Push Patch Event
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/guides/architecture/navigation.md
Handles 'live_patch' events, supporting 'push' and 'replace' navigation kinds. This navigation persists the channel and only changes URL query parameters.
```json
{
"kind": "",
"to": ""
}
```
--------------------------------
### SwiftUI Component Rendering with LiveViewNative
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/README.md
Define a LiveViewNative component for SwiftUI, specifying the format and using the ~LVN sigil for template rendering.
```elixir
defmodule MyAppWeb.HomeLive.SwiftUI do
use LiveViewNative.Component,
format: :swiftui
def render(assigns, _interface) do
~LVN"""
Hello, SwiftUI!
"""
end
end
```
--------------------------------
### Server-side Event Handling for Live Context
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
This Elixir code snippet shows the server-side handler for the 'increment' event pushed from the LiveView Native client.
```elixir
def handle_event("increment", new_count, socket), do: ...
```
--------------------------------
### Define Custom Addon for LiveView
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Create a custom addon using the `@Addon` macro to integrate custom elements into your LiveView application. This involves defining a `TagName` enum to map DOM tag names to Swift enum cases.
```swift
public extension Addons {
@Addon
struct MyAddon {
// ...
}
}
```
```swift
@Addon
struct MyAddon {
enum TagName: String {
case myTag = "MyTag"
}
}
```
```swift
@Addon
struct MyAddon {
enum TagName: String {
case myTag = "MyTag"
}
static func lookup(_ name: TagName, element: ElementNode) -> some View {
switch name {
case .myTag:
Text("My custom element!")
}
}
}
```
```swift
@Addon
struct MyAddon {
enum TagName: String {
case myTag = "MyTag"
}
static func lookup(_ name: TagName, element: ElementNode) -> some View {
switch name {
case .myTag:
MyTag()
}
}
}
```
--------------------------------
### Server-side Event Handling in Elixir
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
This Elixir code demonstrates how to handle the 'handle-increment' event sent from the LiveView Native client, updating the socket's assigns.
```elixir
def handle_event("handle-increment", new_count, socket) do
{:noreply, assign(socket, count: new_count)}
end
```
--------------------------------
### Define Custom Element with Attributes
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Add properties to your `@LiveElement` struct to define attributes for your custom element. These properties will be automatically decoded from the element's HTML attributes. Ensure properties have default values or are optional.
```swift
@LiveElement
struct MyTag: View {
private var label: String?
private var itemCount: Int = 0
var body: some View {
Text(label ?? "")
Text("Value: \(itemCount)")
}
}
```
--------------------------------
### Custom Resolvable Type: Video
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Defines a custom `Video` struct with a nested `Resolvable` type that conforms to `StylesheetResolvable`, allowing its properties to be dynamic via `AttributeReference`.
```swift
struct Video {
let url: String
let resolution: Int
@ASTDecodable("Video")
struct Resolvable: StylesheetResolvable, Decodable {
let url: AttributeReference
let resolution: AttributeReference
init(_ url: AttributeReference, in resolution: AttributeReference) {
self.url = url
self.resolution = resolution
}
func resolve(on element: ElementNode, in context: LiveContext) -> Video {
Video(
url: url.resolve(on: element, in: context),
resolution: resolution.resolve(on: element, in: context)
)
}
}
}
```
--------------------------------
### ASTDecodable Macro with Enum and Initializers
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Illustrates how the @ASTDecodable macro synthesizes decoders for enum cases and various initializer types within a struct or enum.
```swift
@ASTDecodable("MyType")
enum MyType: Decodable {
init() {} // decodable
case enumCase // decodable
static func staticFunction() -> Self { ... } // decodable
static func staticFunction() -> OtherType { ... } // not decodable
static func _staticFunction() -> OtherType { ... } // not decodable
static var staticMember: Self { ... } // decodable
static var staticMember: OtherType { ... } // not decodable
static var _staticMember: OtherType { ... } // not decodable
func memberFunction() -> Self { ... } // decodable
func memberFunction() -> OtherType { ... } // not decodable
func _memberFunction() -> OtherType { ... } // not decodable
var property: Self { ... } // decodable
var property: OtherType { ... } // not decodable
var _property: OtherType { ... } // not decodable
}
extension MyType {
static func staticFunction() -> Self { ... } // not decodable
static var staticMember: Self { ... } // not decodable
func memberFunction() -> Self { ... } // not decodable
var property: Self { ... } // not decodable
}
```
--------------------------------
### Declare Custom Element with LiveElement Macro
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Use the `@LiveElement` macro to declare a custom SwiftUI View that can be used as a custom element in LiveView templates. This macro enables functionality like attributes and children.
```swift
@LiveElement
struct MyTag: View {
var body: some View {
Text("My custom element!")
}
}
```
--------------------------------
### Implement FormValue for Bool
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/FormControls.md
Conform `Bool` to the `FormValue` protocol to enable its use in LiveView forms. This defines how boolean values are converted to and from their string representations.
```swift
extension Bool: FormValue {
public var formValue: String {
self ? "true" : "false"
}
public init?(formValue: String) {
self = formValue == "true"
}
}
```
--------------------------------
### Handling Events with @Event Wrapper
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomElement.md
Use the @Event property wrapper to add event attributes to your LiveElements. The framework automatically handles properties like phx-debounce and phx-throttle.
```swift
@LiveElement
struct MyTag: View {
private var count: Int = 0
@Event("onIncrement", type: "click") private var onIncrement
var body: some View {
$liveElement.children()
Text("Value: \(count)")
Button("Increment") {
onIncrement(value: count + 1)
}
}
}
```
--------------------------------
### Basic Divider Usage
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/Layout Containers/Divider.md
Use the Divider view to create a horizontal line that separates content. It automatically adjusts its orientation when placed within a vertical stack.
```html
(.localhost)
var body: some View {
LiveView(session: session)
}
}
```
--------------------------------
### Mic Toggle with Binding
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/FormControls.md
A custom SwiftUI view that uses `@FormState` and its projected value (`$value`) to create a `Binding` for a `Toggle` control. This allows the toggle to directly modify the `@FormState` variable.
```swift
struct MicToggle: View {
@FormState(default: false) var value: Bool
var body: some View {
Toggle(isOn: $value) {
Text(value ? "Mic On" : "Mic Off")
}
}
}
```
--------------------------------
### SwiftUI LabeledModifier with HorizontalAlignment Resolvable
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
A SwiftUI ViewModifier that accepts a `String` label and a `HorizontalAlignment.Resolvable` for dynamic alignment, demonstrating the use of `StylesheetResolvable`.
```swift
@ASTDecodable("labeled")
struct LabeledModifier: ViewModifier, @preconcurrency Decodable {
let label: String
let alignment: HorizontalAlignment.Resolvable
init(as label: String, alignment: HorizontalAlignment.Resolvable) {
self.label = label
self.alignment = alignment
}
func body(content: Content) -> some View {
VStack(alignment: alignment.resolve(on: element, in: context)) {
Text(label)
content
}
}
}
```
--------------------------------
### Toggle Edit Mode with EditButton
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/Controls and Indicators/EditButton.md
Use this view to activate or deactivate the edit mode for lists. Ensure your environment supports edit mode.
```html
: View {
private var label: String?
@LiveAttribute(.init(namespace: "item", name: "count")) private var itemCount: Int = 0
// this property will not be available as an attribute
@LiveElementIgnored
@Environment(\.colorScheme)
private var colorScheme: ColorScheme
var body: some View {
Text(label ?? "")
switch colorScheme {
case .dark:
Text("Value: \(itemCount)").foregroundStyle(.yellow)
default:
Text("Value: \(itemCount)").foregroundStyle(.orange)
}
}
}
```
--------------------------------
### TextField Protocol - textFieldStyle
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/TextFieldProtocol/TextFieldProtocol-textFieldStyle.md
The `textFieldStyle` method allows you to apply predefined or custom styles to text fields within your LiveViewNativeSwiftUI application. This is useful for consistent UI design and theming.
```APIDOC
## `LiveViewNative/TextFieldProtocol/textFieldStyle`
### Description
Applies a text field style to the element.
### Method
`textFieldStyle`
### Endpoint
N/A (This is a protocol method, not an API endpoint)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
N/A
### Response
#### Success Response (200)
N/A (This is a protocol method, not an API endpoint)
#### Response Example
N/A
```
--------------------------------
### Set Tint Color
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
Apply a 'tint' color to a view and its children. The 'color' property accepts CSS-style hex codes or system color names prefixed with 'system-'.
```html
:
- `fill-color`: The color this shape is filled with (mutually exclusive with `stroke-color`, see )
- `stroke-color`: The color this shape is stroked with (mutually exclusive with `fill-color`, see )
```
--------------------------------
### SwiftUI FillBackgroundModifier with StylesheetResolvableShapeStyle
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
A SwiftUI ViewModifier that uses `StylesheetResolvableShapeStyle` to apply a dynamic background fill, supporting various `ShapeStyle` types.
```swift
@ASTDecodable("fillBackground")
struct FillBackgroundModifier: ViewModifier, @preconcurrency Decodable {
let fill: StylesheetResolvableShapeStyle
init(_ fill: StylesheetResolvableShapeStyle) {
self.fill = fill
}
func body(content: Content) -> some View {
content.background(fill)
}
}
```
--------------------------------
### Render an Ellipse Shape
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/Shapes/Ellipse.md
Use the Ellipse tag to create an elliptical shape. Customize its appearance using attributes like `fill-color`.
```html
: View {
private var count: Int = 0
var body: some View {
$liveElement.children()
Text("Value: \(count)")
}
}
```
--------------------------------
### Set List Row Separator Visibility
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
Control the visibility of list row separators using 'list_row_separator'. Set 'visibility' to 'hidden', 'visible', or 'automatic'. Apply to specific 'edges' like 'top', 'bottom', or 'all'.
```html
: ViewModifier, @preconcurrency Decodable {
@ObservedElement private var element
@LiveContext private var context
let content: ViewReference
init(_ content: ViewReference) {
self.content = content
}
func body(content: Content) -> some View {
content.background {
content.resolve(on: element, in: context)
}
}
}
```
--------------------------------
### Common Modifiers
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
These attributes are supported by all elements, including custom ones. Modifiers are specified as a JSON array of objects on elements.
```APIDOC
## Common Modifiers
These attributes are supported by all elements, including custom ones. Modifiers are specified as a JSON array of objects on elements.
```html
```
### Attributes
- `navigation_title`: The navigation title of the current page. Only displayed when navigation is enabled, see `LiveSessionConfiguration/navigationMode-swift.property`. Properties:
- `title` (string): The navigation title.
- `frame`: A fixed size or flexible size frame around the modified view. Note that the fixed and flexible properties are mutually exclusive. All properties are optional. Properties:
- `width` (number): The width of the frame.
- `height` (number): The height of the frame.
- `min_width` (number): The minimum width of the frame.
- `ideal_width` (number): The ideal width of the frame.
- `max_width` (number): The maximum width of the frame.
- `min_height` (number): The minimum height of the frame.
- `ideal_height` (number): The ideal height of the frame.
- `max_height` (number): The maximum height of the frame.
- `alignment` (string): How the view is aligned within the frame. One of the following values:
- `top-leading`
- `top`
- `top-trailing`
- `leading`
- `center` (default)
- `trailing`
- `bottom-leading`
- `bottom`
- `bottom-trailing`
- `leading-last-text-baseline`
- `trailing-last-text-baseline`
- `padding`: The padding to apply around the edges of the view. All properties are optional. Properties:
- `all` (number): The padding for all edges. If used, other properties are ignored.
- `top` (number): The top edge padding.
- `bottom` (number): The bottom edge padding.
- `leading` (number): The leading edge padding.
- `trailing` (number): The trailing edge padding.
- `list_row_separator`: The configuration for the separator of this list row. Properties:
- `visibility`: The separator visibility. Possible values:
- `hidden`: The separator is hidden.
- `visible`: The separator is shown.
- `automatic`: The separator visibility is determined automatically by the platform.
- `edges`: Which edges the list separator visibility applies to. Possible values:
- `top`
- `bottom`
- `all` (default)
- `list_row_inset`: Insets for the list row, overriding the default insets. Properties:
- `all` (number): The inset for all edges. If used, other properties are ignored.
- `top` (number): The top inset.
- `bottom` (number): The bottom inset.
- `leading` (number): The leading inset.
- `trailing` (number): The trailing inset.
- `tint`: The tint color of this view and all nested views. Properties:
- `color` (string): The tint color. See .
```
--------------------------------
### Synthesize Decoder with ASTDecodable Macro
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Use the @ASTDecodable macro to automatically synthesize a Decodable decoder for your ViewModifier struct. Pass the name of the modifier as a string argument.
```swift
@ASTDecodable("labeled")
struct LabeledModifier: ViewModifier, @preconcurrency Decodable {
let label: String
init(as label: Int) {
self.label = String(label)
}
init(as label: String) {
self.label = label
}
func body(content: Content) -> some View {
LabeledContent {
content
} label: {
Text(label)
}
}
}
```
--------------------------------
### Set Navigation Title
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
The 'navigation_title' attribute sets the title for the current page when navigation is enabled. It accepts a 'title' string.
```html
```
--------------------------------
### TextFieldProtocol.submitLabel
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/TextFieldProtocol/TextFieldProtocol-submitLabel.md
The submitLabel property allows customization of the text displayed on the submit button for text fields.
```APIDOC
## TextFieldProtocol.submitLabel
### Description
Defines the label for the submit button associated with a text field.
### Method
N/A (This is a property, not an endpoint)
### Endpoint
N/A (This is a property, not an endpoint)
### Parameters
N/A
### Request Example
N/A
### Response
N/A
### Error Handling
N/A
```
--------------------------------
### SwiftUI vs LiveView Native Modifier Structure
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/guides/architecture/modifiers.md
Compares the structure of a SwiftUI ViewModifier function with its LiveView Native equivalent. LiveView Native uses a struct conforming to `ViewModifier` and annotated with `@ParseableExpression`.
```swift
extension View {
func bold(_ isActive: Bool) -> some View
}
```
```swift
@ParseableExpression
struct _boldModifier: ViewModifier {
static let name = "bold"
let isActive: Bool
init(_ isActive: Bool) {
self.isActive = isActive
}
func body(content: Content) -> some View {
content.bold(isActive)
}
}
```
--------------------------------
### SwiftUI LabeledModifier with AttributeReference
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Defines a SwiftUI ViewModifier that uses an `AttributeReference` for its label, allowing dynamic label values from stylesheets.
```swift
@ASTDecodable("labeled")
struct LabeledModifier: ViewModifier, @preconcurrency Decodable {
@ObservedElement private var element
@LiveContext private var context
let label: AttributeReference
init(as label: AttributeReference) {
self.label = label
}
func body(content: Content) -> some View {
LabeledContent {
content
} label: {
Text(label.resolve(on: element, in: context))
}
}
}
```
--------------------------------
### Define Custom Modifier Enum
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/AddCustomModifier.md
Create an enum conforming to ViewModifier and Decodable to handle custom modifiers. The init(from:) method must attempt to decode each modifier type and throw if none match.
```swift
@Addon
struct MyAddon {
enum CustomModifier: ViewModifier, @preconcurrency Decodable {
case myFirstModifier(MyFirstModifier)
case mySecondModifier(MySecondModifier)
init(from decoder: any Decoder) throws {
let container = try decoder.singleValueContainer()
if let modifier = try? container.decode(MyFirstModifier.self) {
self = .myFirstModifier(modifier)
} else {
self = .mySecondModifier(try container.decode(MySecondModifier.self))
}
}
func body(content: Content) -> some View {
switch self {
case .myFirstModifier(let modifier):
content.modifier(modifier)
case .mySecondModifier(let modifier):
content.modifier(modifier)
}
}
}
}
```
--------------------------------
### Set Shape Fill Color
Source: https://github.com/liveview-native/liveview-client-swiftui/blob/main/Sources/LiveViewNative/LiveViewNative.docc/SupportedModifiers.md
Define the fill color for shapes using 'fill-color'. This is mutually exclusive with 'stroke-color'. Colors can be specified as hex codes or system colors.
```html