CheckList

Used to organize the flow of tasks in a project.
Import

When To Use#

If the current page business logic is too complex, and with a more mandatory sequential flow control, then you can use this component to help you simplify the process.

Examples

Check List

The simplest usage.

expand codeexpand code
      Loading...
    
Open List

Configure the preview effect by customizing parameters.

expand codeexpand code
      Loading...
    

API#

nz-check-list#

PropertyDescriptionTypeDefaultGlobal Config
[nzItems]check list elementsNzItemProps[]-
[nzVisible]show check-listbooleanfalse-
[nzIndex]current indexnumber1-
[nzProgress]show progressbooleantrue-
[nzTriggerRender]rendering template for float buttonTemplateRef<void> | string--
[nzTitle]rendering template for the check-list panel titleTemplateRef<void> | string--
[nzFooter]rendering template for the check-list panel footerTemplateRef<void> | string--
(nzHide)callback for hiding the check listEventEmitter<boolean>false-

Value of (nzHide) is whether not show the check-list anymore. If the value is true, you can store a data in LocalStorage to avoid showing the check-list again.

Interfaces#

NzItemProps#

PropertyDescriptionTypeDefault
keyunique identifierstring-
descriptiondescription contentstring-
onClickmethod triggered by clicking the step() => void-

key is the unique identifier of the current item. If not set, description will be used as the key.