Element

Returns the content of this element.

Elements generally fall into two types:

• Leaf elements, or elements that have no children. These elements commonly have an intrinsic size, or some content that can be measured. Leaf elements typically instantiate their content with ElementContent(measurable:) or similar.
• Container elements: these element have one or more children, which are arranged by a layout implementation. Container elements typically use methods like ElementContent(layout:configure:) to instantiate their content.

Returns an (optional) description of the view that should back this element.

In Blueprint, elements that are displayed using a live UIView instance are referred to as “view-backed”. Elements become view-backed by returning a ViewDescription value from this method.

Wraps this element in an AdaptedEnvironment with the given environment key and value.

Wraps this element in an AdaptedEnvironment with the given keypath and value.

Wraps this element in an AdaptedEnvironment with the given configuration block.

Wraps the element in an Aligned element with the provided parameters.

Wraps the element in a Centered element to center it within its parent.

Returns a new element from the provided modify closure, if the provided boolean is true. Otherwise, the original element is returned.

myElement.if(someBoolean) { element in
    element.centered()
}

Returns a new element from the provided then closure if the provided boolean is true. If the provided boolean is false, the else closure is used

myElement.if(
    someBoolean,
    then: { element in
          element.aligned(horizontally: .trailing, vertically: .fill)
    },
    else: { element in
        element.aligned(horizontally: .leading, vertically: .fill)
    }
)

Returns a new element from the provided modify closure if the provided value is non-nil. Otherwise, the original element is returned.

myElement.if(let: someValue) { value, element in
    element.inset(uniform: someValue.padding)
}

Returns a new element from the provided then closure if the provided boolean is true. If the provided value is nil, the else closure is used

myElement.if(
    let: someValue,
    then: { value, element in
          element.inset(uniform: value.padding)
    },
    else: { element in
        element.inset(uniform: 10)
    }
)

Creates and returns a new element by passing the element to the provided map function.

myElement.map { element in
    switch myState {
    case .small: element.inset(uniform: 5)
    case .medium: element.inset(uniform: 10)
    case .large: element.inset(uniform: 15)
    }
}

Creates and returns a new element by passing the element to the provided modify function, which can edit it.

myElement.modify { element in
    switch myState {
    case .small: element.inset = 5
    case .medium: element.inset = 10
    case .large: element.inset = 15
    }
}

Constrains the element to the provided aspect ratio.

Constrains the measured size of the element to the provided width and height.

Constrains the measured size of the element to the provided width and height.

Constrains the measured size of the element to the provided size.

Constrains the measured size of the element to the provided SizeConstraint.

Places a decoration element behind or in front of the given wrapped element, and positions it according to the position parameter.

See the Decorate element for more.

Wraps the element in a Flow.Child to allow customizing the item in the flow layout.

Wraps an element with a GridRowChild in order to provide meta information that a GridRow can aply to its layout.

Conditionally hide the wrapped element.

Hidden elements still participate in layout. Hiding sets the UIView.isHidden property of the nearest backing view.

Insets the element by the given amount on each side.

Insets the element by the given amount on each side.

Insets the element by the given amount on each side.

Insets the element by the given amount on each side.

Keyed allows providing a Hashable value which is used during view updates to uniquely identify content during the diff process between the old and new element structure.

This is useful if you have two elements of the same type at the same depth in the element hierarchy, and you’d like to differentiate between them, eg for appearance transition purposes.

Example

Keying the image returned, so that a transition occurs when changing between a placeholder image and an available photo.

func imageElement() -> Element {
    if let photo = self.photo {
        return Image(image: photo)
                .transition(.fade)
                .keyed("photo")
    } else {
        return Image(image: self.placeholder)
                .transition(.fade)
                .keyed("placeholder")
    }
}

Adds a hook that will be called when this element appears.

Callbacks run in depth-first traversal order, with parents before children.

Adds a hook that will be called when this element disappears.

Callbacks run in depth-first traversal order, with parents before children. There is no guaranteed order between disappearance callbacks and backing views being removed from their superviews.

Wraps the element in an Opacity element with the provided opacity.

Wraps an element with a StackLayout.Child in order to customize StackLayout.Traits and the key.

Wraps an element with a StackLayout.Child in order to customize the StackLayout.Child.Priority.

Conditionally modifies the tint adjustment mode of its wrapped element.

Wraps the element in an Transformed element with the provided 3D transform.

Wraps the element in an Transformed element with the provided 2D transform.

Wraps the element in an Transformed element that translates the receiver in 3D space.

Wraps the element in an Transformed element that rotates the receiver in 2D space.

Wraps the element in an Transformed element that scales the receiver in 2D space.

Conditionally enable user interaction of the wrapped element.

Blocks all accessibility on the element, so that it is is no longer an accessibility element, and its children are hidden from the accessibility system.

Acts as an accessibility container for any subviews where isAccessibilityElement == true.

Wraps the receiver in an accessibility element with the provided values.

Providing a nil value for any of these parameters will result in no resolved value for that accessibility parameter—it does not inherit parameters from the wrapped element’s accessibility configuration.

Enables VoiceOver focus to jump to the wrapped element via the trigger.

Adds large content viewer support to an individual element. Ensure that you use this in conjunction with accessibilityLargeContentViewerInteractionContainer().

Large content viewer allows users to see a larger version of content when they press and hold on small UI elements. This is particularly useful for users who are low vision. It must only be used if dynamic type is not an option for a given element; it must not be used as a substitute for dynamic type. It’s triggered by a long press gesture and shows an enlarged version of the content in a special overlay. It’s only available when accessibility system type sizes.

Adds a large content viewer interaction container to the element. This is used to wrap elements that need to be able to show a large content viewer. Use this in conjunction with accessibilityShowsLargeContentViewer() on elements that need to show a large content viewer. Elements that are wrapped in this container will be able to show a large content viewer and allow a user to swipe through them with one finger and have the HUD update in real time.

Handle links opened in any AttributedLabel within this element using the provided closure.

Wraps the element in a box to provide basic styling.

Allows showing the system’s UIMenuController editing menu upon long press of the wrapped element.

myElement.editingMenu(show: .onLongPress) {
    EditingMenuItem.copying("A String")

    EditingMenuItem(.select) {
        print("Selected!")
    }
}

Wraps the element in a ScrollView to allow it to be scrolled if it takes up more space then is available on screen.

Wraps the element and calls the provided closure when tapped.

Wraps the element in a transition container to provide an animated transition.

Wraps the element in a transition container to provide an animated transition when its visibility changes.

Wraps this element in a UserInterfaceStyleOverridingElement to override its interface style.

This method provides a convenient way to override the user interface style (light/dark mode) for any element.

Example:

Label(text: "Always Light Mode")
  .overrideUserInterfaceStyle(.light)