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 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.

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

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

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.