Thumbprint logo

Components

Avatar

Display user images and badges on Thumbtack.

Summary

Avatars provide a container for displaying Entity or User images on Thumbtack. This component displays either the filled images after loading the image via URL or the blank Avatar view if there’s no backing image and initials are provided.

Entity: a company, business, or service.
User: a person or user.

Examples

Initials

HStack {
    TPAvatar(url: nil, initials: "N")
        .tpAvatarTheme(.medium)
        .tpAvatarType(.entity)
    TPAvatar(url: nil, initials: "NC", isOnline: true)
        .tpAvatarTheme(.medium)
        .tpAvatarType(.user)
}

Initials example screenshot

Image initializer / Custom theme

TPAvatar(image: Image(systemName: "car.circle.fill"), isOnline: true)
            .tpAvatarTheme(TPAvatarTheme(size: 96, badgeSize: 22, font: .callout))
            .tpAvatarType(.user)

Image init / theme customization example screenshot

URL initializer

HStack {
    TPAvatar(url: URL(string: "https://i.pravatar.cc/140"), isOnline: true)
        .tpAvatarTheme(.large)
        .tpAvatarType(.user)
    TPAvatar(url: URL(string: "https://i.pravatar.cc/140"), isOnline: true)
        .tpAvatarTheme(.large)
        .tpAvatarType(.entity)
}

URL initializer example screenshot

Environment Values

.tpAvatarType(_ style: TPAvatarType)

Either .user or .entity

.tpAvatarTheme(_ theme: TPAvatarTheme)

Allows customization of the avatar look and feel. Defaults are provided for xSmall, small, medium, large, xLarge

Initializers

public init(url: URL?, initials: String? = nil, isOnline: Bool = false)

url: - URL used to asynchronously load the avatar image

public init(image: Image, isOnline: Bool = false)

image: - Image used for the avatar

isOnline: Bool

Boolean value that controls whether the online badge is shown or not.

initials: String?

The initials to be shown when displaying the blank avatar. One character is used for .entity, and up to two characters can be used for .user styled avatars