Core Features
📊 Univer Sheet📝 Univer Doc
Core packages implement the basic functions of the document, including the core functions of Univer Doc, such as browsing documents, editing documents, etc.
Installation
pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/ui
Import
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverUIPlugin } from "@univerjs/ui";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
Internationalization
import { LocaleType, Tools } from '@univerjs/core';
import DesignEnUS from '@univerjs/design/locale/en-US';
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US';
import SheetsEnUS from '@univerjs/sheets/locale/en-US';
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US';
import UIEnUS from '@univerjs/ui/locale/en-US';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: Tools.deepMerge(
DesignEnUS,
DocsUIEnUS,
UIEnUS
),
},
});
Register
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
univer.registerPlugin(UniverUIPlugin, {
container: 'app',
footer: false,
});
univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverDocsUIPlugin, {
container: 'univerdoc',
layout: {
docContainerConfig: {
innerLeft: false,
},
},
});
univer.createUnit(UniverInstanceType.UNIVER_DOC, {});
Configuration
@univerjs/core
@univerjs/core
provides some configuration options that can be used to configure the theme, internationalization, etc.
new Univer({
theme: IStyleSheet;
locale: LocaleType;
locales: ILocales;
logLevel?: LogLevel;
});
For a complete list of configuration options, see IUniverData.
@univerjs/ui
@univerjs/ui
provides some configuration options that can be used to configure the basic layout.
univer.registerPlugin(UniverUIPlugin, {
container?: string | HTMLElement;
header?: boolean;
footer?: boolean;
contextMenu?: boolean;
});
container
- Container element, can be a string or DOM element.header
- Whether to display the header.toolbar
- Whether to display the header toolbar. 0.1.18+footer
- Whether to display the footer.contextMenu
- Whether to display the right-click menu.