2020-08-19 03:39:41 +08:00
|
|
|
|
# ListItem
|
2021-01-25 17:35:52 +08:00
|
|
|
|
[](https://www.npmjs.com/package/@tiptap/extension-list-item)
|
|
|
|
|
|
[](https://npmcharts.com/compare/@tiptap/extension-list-item?minimal=true)
|
|
|
|
|
|
|
2020-09-23 18:33:45 +08:00
|
|
|
|
The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
|
2020-08-19 03:39:41 +08:00
|
|
|
|
|
2020-09-23 18:33:45 +08:00
|
|
|
|
## Installation
|
2020-09-23 15:52:04 +08:00
|
|
|
|
```bash
|
2020-10-30 21:24:16 +08:00
|
|
|
|
# with npm
|
2020-09-23 15:52:04 +08:00
|
|
|
|
npm install @tiptap/extension-list-item
|
|
|
|
|
|
|
2020-10-30 21:24:16 +08:00
|
|
|
|
# with Yarn
|
2020-09-23 15:52:04 +08:00
|
|
|
|
yarn add @tiptap/extension-list-item
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-02-12 22:02:40 +08:00
|
|
|
|
This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node.
|
|
|
|
|
|
|
2020-09-23 18:03:03 +08:00
|
|
|
|
## Settings
|
2020-11-18 19:12:34 +08:00
|
|
|
|
| Option | Type | Default | Description |
|
|
|
|
|
|
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
|
|
|
|
|
|
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
2020-09-23 18:33:45 +08:00
|
|
|
|
|
|
|
|
|
|
## Keyboard shortcuts
|
|
|
|
|
|
* New list item: `Enter`
|
|
|
|
|
|
* Sink a list item: `Tab`
|
2020-09-27 17:01:25 +08:00
|
|
|
|
* Lift a list item: `Shift` `Tab`
|
2020-09-23 18:33:45 +08:00
|
|
|
|
|
|
|
|
|
|
## Source code
|
2021-04-21 21:31:11 +08:00
|
|
|
|
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/)
|
2020-09-23 18:33:45 +08:00
|
|
|
|
|
|
|
|
|
|
## Usage
|
2020-11-03 23:43:35 +08:00
|
|
|
|
<demo name="Nodes/ListItem" highlight="3-8,20-22,41-43" />
|
