Coach Mark
You can edit 8 Components for free. Get premium for unlimited access.
Choose between FigmaUI, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Coach Mark component is used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.
1. Reference
This component inherits props from the Check Mark.
2. Direction
You can edit the direction with the bottom, top, left or right parameter.
Image 2.1 : Direction bottom
Image 2.2 : Direction mark top
Image 2.3 : Direction left
Image 2.4 : Direction mark right
SwiftUI
The DLCoachMark component is a customizable SwiftUI view used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.
1. Reference
This component inherits props from the Coach Mark.
-
2. Direction
You can edit the direction with the .top, .left, .right or .bottom parameter.
DLCoachMarkItem(
title: "Headline",
description: "Pack my box with five dozen liquor jugs. How vexingly quick draft."
),
DLCoachMarkItem(
title: "Headline",
description: "Pack my box with five dozen liquor jugs. How vexingly quick draft."
)
]
DLCoachMark(
items: items,
direction: .bottom
)
Jetpack Compose
The CoachMark component is a customizable SwiftUI view used to create in-app tutorials or guided user experiences. It highlights key areas of the interface with directional indicators and accompanying text descriptions.
1. Reference
This component inherits props from the Coach Mark.
-
2. Direction
You can edit the direction with the CoachMarkDirection.top, CoachMarkDirection.left, CoachMarkDirection.right or CoachMarkDirection.bottom parameter.
direction = CoachMarkDirection.bottom,
items = listOf(CoachMarkStep(
title = "Headline 1",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
),
CoachMarkStep(
title = "Headline 2",
description = "Pack my box with five dozen liquor jugs. How vexingly quick draft.",
))
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?