Enhanced List
Plugins Info
The enhanced list feature provides advanced list capabilities for Univer Docs, including nested lists, custom glyphs, and flexible list manipulation.
Introduction
In Univer Docs, enhanced lists enable you to:
- Create nested lists: Build multi-level list hierarchies.
- Customize glyphs: Use different bullet symbols and numbering styles.
- Manipulate list structure: Promote, demote, and reorder list items.
Plugin Mode
Installation
Shell
pnpm add @univerjs-pro/docs-list @univerjs-pro/docs-list-uiShell
npm install @univerjs-pro/docs-list @univerjs-pro/docs-list-uiShell
yarn add @univerjs-pro/docs-list @univerjs-pro/docs-list-uiShell
bun add @univerjs-pro/docs-list @univerjs-pro/docs-list-uiUsage
TypeScript
import { UniverDocsListPlugin } from '@univerjs-pro/docs-list'import { UniverDocsListUIPlugin } from '@univerjs-pro/docs-list-ui'import DocsListUIEnUS from '@univerjs-pro/docs-list-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-list-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsListUIEnUS, ), },})univer.registerPlugin(UniverDocsListPlugin)univer.registerPlugin(UniverDocsListUIPlugin)If you have a commercial license for Univer, please refer to Using License in Client for configuration.
Facade API
Make sure to import the facade before using the API:
TypeScript
import '@univerjs-pro/docs-list/facade'Insert a List
TypeScript
import { PresetListType } from '@univerjs/core'const doc = univerAPI.getActiveDocument()doc?.insertList({ startOffset: 0, endOffset: 10, listType: PresetListType.BULLET_LIST,})Get All Lists
TypeScript
const doc = univerAPI.getActiveDocument()const lists = doc?.getLists() ?? []Set List Glyph Type
TypeScript
const doc = univerAPI.getActiveDocument()doc?.setListGlyphType(0, ListGlyphType.DECIMAL)Set List Level
TypeScript
const doc = univerAPI.getActiveDocument()doc?.setListLevel(0, 1)How is this guide?