- Available for ZK:
Coachmark is used to attract users' attention to the target component and display a dialog. Once a coachmark is opened, the background mask will be displayed and the target component will be highlighted.The content of coachmark should be as relevant as possible to the context. You can use more than one coachmarks to guide users to perform a series of operations in the desired order.
<zk> <button id="button" label="Information"></button> <coachmark target="button" position="before_center"> <label>Wellcome! click here for more information!</label> <button style="display: block;margin: 10px auto 0" label="got it!"></button> </coachmark> </zk>
This component uses CSS keyframes. Browsers that support CSS keyframes (IE10+, Edge, Chrome, Firefox, Safari) are compatible with this feature.
Open / Close the Coachmark
visible attribute and
open/close methods allow you to open or close the Coachmark.
The target component that the Coachmark will point itself to.
<zk> <button id="button" label="button"></button> <coachmark target="button"> <label>Wellcome!</label> </coachmark> </zk>
The positions of a coachmark(default: after_center). Here are the available options:
The next coachmark which will be opened when the onTargetClick event or the next() method is called.
Note: if you call next(Coachmark coachmark), it will use the specified coachmark instead of the predefined "next" coachmark.
public void next() : Closes the current coachmark and Opens the next one.
public void next(Coachmark coachmark) : Close the current coachmark and Opens the one you passed.(ignore the next coachmark you already set)
Denotes that the user has opened or closed a component.
Represents an event caused by a user's click on a highlighted target component.
- Inherited Supported Events: XulElement
|9.0.0||Nov, 2019||ZK-4382: Provide a Coachmark component|