You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.5 KiB
50 lines
1.5 KiB
4 years ago
|
////
|
||
|
|
Included in:
|
||
|
|
|
||
|
|
- user-manual: Unordered lists: Checklists
|
||
|
|
////
|
||
|
|
|
||
|
|
List items can be marked complete using checklists.
|
||
|
|
|
||
|
|
Checklists (i.e., task lists) are unordered lists that have items marked as checked (`[*]` or `[x]`) or unchecked (`[ ]`).
|
||
|
|
Here's an example:
|
||
|
|
|
||
|
|
.Checklist syntax
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-ulist.adoc[tag=check]
|
||
|
|
----
|
||
|
|
|
||
|
|
.Rendered checklist
|
||
|
|
====
|
||
|
|
include::ex-ulist.adoc[tag=check]
|
||
|
|
====
|
||
|
|
|
||
|
|
TIP: Not all items in the list have to be checklist items, as the previous example shows.
|
||
|
|
|
||
|
|
When checklists are converted to HTML, the checkbox markup is transformed into an HTML checkbox with the appropriate checked state.
|
||
|
|
The `data-item-complete` attribute on the checkbox is set to 1 if the item is checked, 0 if not.
|
||
|
|
The checkbox is used in place of the item's bullet.
|
||
|
|
|
||
|
|
Since HTML generated by Asciidoctor is usually static, the checkbox is set as disabled to make it appear as a simple mark.
|
||
|
|
If you want to make the checkbox interactive (i.e., clickable), add the `interactive` option to the checklist (shown here using the shorthand syntax for <<Options>>):
|
||
|
|
|
||
|
|
.Checklist with interactive checkboxes
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-ulist.adoc[tag=check-int]
|
||
|
|
----
|
||
|
|
|
||
|
|
.Rendered checklist with interactive checkboxes
|
||
|
|
====
|
||
|
|
include::ex-ulist.adoc[tag=check-int]
|
||
|
|
====
|
||
|
|
|
||
|
|
As a bonus, if you enable font-based icons, the checkbox markup (in non-interactive lists) is transformed into a font-based icon!
|
||
|
|
|
||
|
|
.Checklist with font-based checkboxes
|
||
|
|
[source]
|
||
|
|
----
|
||
|
|
include::ex-ulist.adoc[tag=check-icon]
|
||
|
|
----
|