# Características principales

- Human documentation: [https://docs.univer.ai/es-ES/guides/sheets/features/core](https://docs.univer.ai/es-ES/guides/sheets/features/core)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/sheets/features/core.md](https://docs.univer.ai/es-ES/guides/sheets/features/core.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [sheets/features/core/index.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/core/index.es-ES.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [
    {
      "client": "@univerjs/preset-sheets-core",
      "locale": "@univerjs/preset-sheets-core/locales/en-US",
      "style": "@univerjs/preset-sheets-core/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/core"
    },
    {
      "client": "@univerjs/engine-formula"
    },
    {
      "client": "@univerjs/engine-render"
    },
    {
      "client": "@univerjs/design",
      "locale": "@univerjs/design/locale/en-US",
      "style": "@univerjs/design/lib/index.css"
    },
    {
      "client": "@univerjs/ui",
      "locale": "@univerjs/ui/locale/en-US",
      "style": "@univerjs/ui/lib/index.css"
    },
    {
      "client": "@univerjs/docs"
    },
    {
      "client": "@univerjs/docs-ui",
      "locale": "@univerjs/docs-ui/locale/en-US",
      "style": "@univerjs/docs-ui/lib/index.css",
      "facade": "@univerjs/docs-ui/facade"
    },
    {
      "client": "@univerjs/sheets",
      "locale": "@univerjs/sheets/locale/en-US",
      "facade": "@univerjs/sheets/facade"
    },
    {
      "client": "@univerjs/sheets-ui",
      "locale": "@univerjs/sheets-ui/locale/en-US",
      "style": "@univerjs/sheets-ui/lib/index.css",
      "facade": "@univerjs/sheets-ui/facade"
    },
    {
      "client": "@univerjs/sheets-formula",
      "facade": "@univerjs/sheets-formula/facade"
    },
    {
      "client": "@univerjs/sheets-formula-ui",
      "locale": "@univerjs/sheets-formula-ui/locale/en-US",
      "style": "@univerjs/sheets-formula-ui/lib/index.css"
    },
    {
      "client": "@univerjs/sheets-numfmt",
      "facade": "@univerjs/sheets-numfmt/facade"
    },
    {
      "client": "@univerjs/sheets-numfmt-ui",
      "locale": "@univerjs/sheets-numfmt-ui/locale/en-US",
      "style": "@univerjs/sheets-numfmt-ui/lib/index.css"
    }
  ],
  "server": false
}
```

Las características principales de Univer Sheets incluyen un editor de hojas de cálculo, un motor de fórmulas, un motor de renderizado, un motor de formato de números, un sistema de diseño y una biblioteca de componentes de interfaz de usuario. Juntos, forman una poderosa plataforma para manejar hojas de cálculo, admitiendo varios formatos y operaciones complejas.

## Características

Las características principales de Univer Sheets incluyen:

* **Representación de hojas de cálculo**: admite la representación de Univer Sheets, incluido el cursor y el dibujo de selección.
* **Estilo de celda**: permite aplicar estilo a las celdas en la hoja de cálculo, incluida la fuente, el color, los bordes y la alineación.
* **Cálculo de fórmulas**: admite agregar y calcular fórmulas en la hoja de cálculo, cubriendo casi todas las funciones de Excel, incluidas funciones matemáticas, estadísticas, de texto y de fecha.
* **Formato de números**: permite el formato de números en la hoja de cálculo, incluidos formatos de moneda, porcentaje, fecha, etc.
* **Cuadrículas y Paneles congelados**: admite la visualización de líneas de cuadrícula y paneles congelados, lo que facilita a los usuarios ver y editar grandes conjuntos de datos.
* **Estilos predeterminados**: permite configurar estilos predeterminados para la hoja de cálculo, incluida la fuente, el tamaño, el color predeterminados, etc.
* **Sistema de complementos**: admite un sistema de complementos que permite complementos personalizados, como complementos de fórmulas, complementos de imágenes, complementos de gráficos, etc. Esta es también una de las capacidades arquitectónicas principales de Univer.

## Modo de complemento

### Instalación

#### npm

```bash
npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

#### pnpm

```bash
pnpm add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

#### yarn

```bash
yarn add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

#### bun

```bash
bun add @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

### Uso

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'
import SheetsEnUS from '@univerjs/sheets/locale/en-US'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'
import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula-ui/lib/index.css'
import '@univerjs/sheets-numfmt-ui/lib/index.css'
import '@univerjs/engine-formula/facade'
import '@univerjs/ui/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/sheets/facade'
import '@univerjs/sheets-ui/facade'
import '@univerjs/sheets-formula/facade'
import '@univerjs/sheets-numfmt/facade'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DesignEnUS,
      UIEnUS,
      DocsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaUIEnUS,
      SheetsNumfmtUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)
univer.registerPlugin(UniverSheetsFormulaUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsNumfmtUIPlugin)
```

### Complementos y configuración

#### @univerjs/core

Este complemento es la biblioteca principal de Univer y proporciona funcionalidades básicas como la creación de instancias, temas e idiomas de Univer.

```typescript
interface UniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
}
```

Referencia: [`Univer`](https://docs.univer.ai/es-ES/reference/classes/univer.md)

#### @univerjs/engine-render

Este complemento es el motor de renderizado de Univer, responsable del renderizado, las barras de desplazamiento, el cursor y el renderizado de selecciones. Proporciona el `UniverRenderEnginePlugin`.

Referencia: [@univerjs/engine-render](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/engine-render.md)

#### @univerjs/engine-formula

Este complemento es el motor de fórmulas de Univer, responsable de calcular y procesar fórmulas. Proporciona `UniverFormulaEnginePlugin`.

Referencia: [@univerjs/engine-formula](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/engine-formula.md)

#### @univerjs/design

Este complemento es el sistema de diseño de Univer y proporciona todos los componentes y estilos básicos.

Ver: [UI Capítulo](https://docs.univer.ai/es-ES/guides/docs/ui/overview.md)

#### @univerjs/ui

Este complemento es la base de la interfaz de usuario de Univer. Proporciona el `UniverUIPlugin`.

El `UniverUIPlugin` proporciona algunas opciones de configuración que se pueden usar para la configuración de diseño básica.

```typescript
interface IUniverUIConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig
}
```

La opción de configuración `menu` se puede usar para simplemente establecer la visualización o el estado oculto de ciertos elementos de menú específicos:

```typescript
univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

Aquí, `'sheet.command.set-range-bold'` y `'sheet.command.set-range-italic'` son los nombres de los comandos, indicando los elementos del menú correspondientes. Puede consultar la [Lista de ID de elementos del menú](#menu-item-id-list) a continuación.

Referencia: [@univerjs/ui](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/ui.md)

#### @univerjs/docs

Este complemento es el complemento principal de Univer Docs. Proporciona `UniverDocsPlugin`.

Referencia: [@univerjs/docs](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs.md)

#### @univerjs/docs-ui

Este complemento es el complemento de interfaz de usuario de Univer Docs, que incluye componentes de interfaz de usuario e interacciones para el editor de documentos. Proporciona `UniverDocsUIPlugin`.

Referencia: [@univerjs/docs-ui](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/docs-ui.md)

#### @univerjs/sheets

Este complemento es el complemento principal de Univer Sheets y proporciona las funcionalidades principales del editor de hojas de cálculo. Proporciona `UniverSheetsPlugin`.

`UniverSheetsPlugin` proporciona algunas opciones de configuración que se pueden usar para la configuración del editor de hojas de cálculo.

```typescript
interface IUniverSheetsConfig {
  // If both row style and column style are set, whether row style precedes column style
  isRowStylePrecedeColumnStyle?: boolean
  // Whether auto height applies to merged cells
  autoHeightForMergedCells?: boolean
  /**
   * Whether synchronize the frozen state to other users in real-time collaboration.
   * @default true
   */
  freezeSync?: boolean
}
```

Referencia: [@univerjs/sheets](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/sheets.md)

#### @univerjs/sheets-ui

Este complemento es el complemento de interfaz de usuario de Univer Sheets. que incluye componentes de interfaz de usuario e interacciones para el editor de hojas de cálculo. Proporciona el `UniverSheetsUIPlugin`.

`UniverSheetsUIPlugin` proporciona algunas opciones de configuración que se pueden usar para la configuración de la interfaz de usuario del editor de hojas de cálculo.

```typescript
interface IUniverSheetsUIConfig {
  // Whether to show the footer.
  footer?:
    | false
    | {
        // The sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.
        sheetBar?: boolean
        // The statistic bar includes statistics of the current selection, such as count, sum, average, etc.
        statisticBar?: boolean
        // The bottom menu includes options like highlight, gridlines, etc.
        menus?: boolean
        // The zoom slider at the bottom.
        zoomSlider?: boolean
        /**
         * The config of the add sheet button in the sheet bar.
         */
        addSheetButtonConfig?: {
          /**
           * Whether to show the add sheet button in the sheet bar.
           * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered.
           * @default true
           */
          show?: boolean
          /**
           * The default row count of the new sheet created by the add sheet button.
           * @default 1000
           */
          defaultRowCount?: number
          /**
           * The default column count of the new sheet created by the add sheet button.
           * @default 20
           */
          defaultColumnCount?: number
        }
      }
  // Whether to show the formula bar
  formulaBar?: boolean
  clipboardConfig?: {
    // Whether to show the paste options button after paste operation
    hidePasteOptions?: boolean
  }
  // The configuration for the scroll bar
  scrollConfig?: IScrollBarProps
  /**
   * Strategy for showing the protected range shadow.
   * - true or 'always': Show shadow for all protected ranges (default behavior)
   * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false)
   * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false)
   * - false or 'none': Never show shadow for protected ranges
   * @default true
   */
  protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'
  // Whether to disable the force string alert.
  disableForceStringAlert?: boolean
  // Whether to disable the force string mark.
  disableForceStringMark?: boolean
}
```

Referencia: [@univerjs/sheets-ui](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/sheets-ui.md)

## Compatibilidad móvil

Configure primero el [editor móvil](https://docs.univer.ai/es-ES/guides/sheets/getting-started/installation.md#mobile-support). En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes **antes de abrir un documento**. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

| Paquete                       | Registro de escritorio        | Registro móvil                      |
| ----------------------------- | ----------------------------- | ----------------------------------- |
| `@univerjs/sheets-formula-ui` | `UniverSheetsFormulaUIPlugin` | `UniverSheetsFormulaMobileUIPlugin` |
| `@univerjs/sheets-numfmt-ui`  | `UniverSheetsNumfmtUIPlugin`  | `UniverSheetsNumfmtMobileUIPlugin`  |

## Modo preestablecido

### Instalación

#### npm

```bash
npm install @univerjs/presets @univerjs/preset-sheets-core
```

#### pnpm

```bash
pnpm add @univerjs/presets @univerjs/preset-sheets-core
```

#### yarn

```bash
yarn add @univerjs/presets @univerjs/preset-sheets-core
```

#### bun

```bash
bun add @univerjs/presets @univerjs/preset-sheets-core
```

### Uso

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'
import '@univerjs/preset-sheets-core/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(UniverPresetSheetsCoreEnUS),
  },
  presets: [UniverSheetsCorePreset()],
})

univerAPI.createWorkbook({})
```

### Preajustes y configuración

#### @univerjs/presets

Este ajuste preestablecido proporciona el método `createUniver` para crear una aplicación Univer y expone todos los métodos y objetos de **@univerjs/core** y **@univerjs/design**.

El El método `createUniver` acepta un objeto de configuración que incluye opciones de tema, idioma, ajustes preestablecidos, etc. Devuelve una instancia `Univer` `univer` y una instancia `FUniver` `univerAPI` para llamar a la API de Facade.

```typescript
interface CreateUniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  region?: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
  // The list of presets to use.
  presets: IPresets[]
  // The list of plugins to use.
  plugins: IPlugins[]
}
```

Referencia: [`createUniver`](https://docs.univer.ai/es-ES/reference/methods/create-univer.md)

#### @univerjs/preset-sheets-core

Este ajuste preestablecido es el ajuste preestablecido principal de Univer Sheets, que incluye las funciones principales necesarias para la edición de documentos, motor de fórmulas, motor de renderizado, etc.

```typescript
interface IUniverSheetsCorePresetConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the footer
  footer?:
    | false
    | {
        // Sheet bar is the sub-sheet manager, including adding/switching/deleting sub-sheets.
        sheetBar?: boolean
        // Statistic bar includes statistics of the current selection, such as count, sum, average, etc.
        statisticBar?: boolean
        // The bottom menu includes options like highlight, gridlines, etc.
        menus?: boolean
        // The zoom slider at the bottom.
        zoomSlider?: boolean
        /**
         * The config of the add sheet button in the sheet bar.
         */
        addSheetButtonConfig?: {
          /**
           * Whether to show the add sheet button in the sheet bar.
           * When `footer` or `footer.sheetBar` is false, this config will not work because the sheet bar will not be rendered.
           * @default true
           */
          show?: boolean
          /**
           * The default row count of the new sheet created by the add sheet button.
           * @default 1000
           */
          defaultRowCount?: number
          /**
           * The default column count of the new sheet created by the add sheet button.
           * @default 20
           */
          defaultColumnCount?: number
        }
      }
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Menu configuration
  menu?: MenuConfig

  sheets?: {
    // If both row style and column style are set, whether row style precedes column style
    isRowStylePrecedeColumnStyle?: boolean
    // Whether auto height applies to merged cells
    autoHeightForMergedCells?: boolean
    /**
     * Whether synchronize the frozen state to other users in real-time collaboration.
     * @default true
     */
    freezeSync?: boolean

    clipboardConfig?: {
      // Whether to show the paste options button after paste operation
      hidePasteOptions?: boolean
    }
    // The configuration for the scroll bar
    scrollConfig?: IScrollBarProps
    /**
     * Strategy for showing the protected range shadow.
     * - true or 'always': Show shadow for all protected ranges (default behavior)
     * - 'non-editable': Only show shadow for ranges that cannot be edited (Edit permission is false)
     * - 'non-viewable': Only show shadow for ranges that cannot be viewed (View permission is false)
     * - false or 'none': Never show shadow for protected ranges
     * @default true
     */
    protectedRangeShadow?: boolean | 'always' | 'non-editable' | 'non-viewable' | 'none'
    // Whether to disable the force string alert.
    disableForceStringAlert?: boolean
    // Whether to disable the force string mark.
    disableForceStringMark?: boolean
  }

  // ... More configuration options
}
```

La opción de configuración `menu` se puede usar para establecer simplemente la visualización o el estado oculto de ciertos elementos de menú específicos:

```typescript
UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

Aquí, `'sheet.command.set-range-bold'` y `'sheet.command.set-range-italic'` son los nombres de los comandos, que indican el menú correspondiente artículos. Puede consultar la [Lista de ID de elementos del menú](#menu-item-id-list) a continuación.

Referencia: [@univerjs/preset-sheets-core](https://docs.univer.ai/es-ES/reference/packages/presets/univerjs/preset-sheets-core.md)

## Diseño de la barra de herramientas y `RibbonType`

Configurando el `ribbonType` propiedad en `IUniverSheetsCorePresetConfig` o `IUniverUIConfig`, puede configurar el diseño de la barra de herramientas.

`ribbonType` admite los siguientes cuatro modos:

* `classic`: modo clásico predeterminado, con grupos en la parte superior y la barra de herramientas dispuesta debajo, adecuado para los usuarios acostumbrado a los diseños tradicionales.
* `grid`: modo de cuadrícula, que conserva las pestañas en la parte superior y organiza debajo las herramientas de cada grupo en una cuadrícula de dos filas, adecuado para diseños de escritorio que necesitan mostrar más herramientas a la vez.
* `collapsed`: modo compacto, donde los grupos y la barra de herramientas se colocan en la misma fila, adecuado para escenarios con espacio de pantalla vertical limitado.
* `simple`: modo desagrupado, donde todas las herramientas se colocan en una lista plana, adecuado para usuarios familiarizados con las funciones de la barra de herramientas.



## Orden de menús y disposición en cuadrícula

La configuración inicial y [`univerAPI.updateMenuConfig()`](https://docs.univer.ai/es-ES/reference/facade/univer.md#updatemenuconfig) utilizan la misma estructura `menu`. Las claves identifican una pestaña del Ribbon (por ejemplo, `ribbon.insert`), un grupo (por ejemplo, `ribbon.start.format`) o un elemento de menú.

`order` ordena de menor a mayor los elementos del mismo nivel: pestañas, grupos dentro de una pestaña y elementos dentro de un grupo o submenú. No mueve un elemento a otro grupo. También puede usar `RibbonPosition` y las enumeraciones de grupos exportadas por `@univerjs/ui`.

### Configuración inicial

Elija su modo e incorpore estas opciones a la inicialización existente. Conserve los demás complementos y la configuración de idioma, tema y contenedor; no registre dos veces el mismo complemento.

```ts
import type { MenuConfig } from '@univerjs/ui'

const menu: MenuConfig = {
  'ribbon.insert': { order: -1 },
  'ribbon.start.format': { order: -1 },
  'sheet.command.set-range-font-family': {
    order: 0,
    gridLayout: { row: 1, column: 1, width: 160 },
  },
}
```

#### Modo de complemento

```typescript
import { UniverUIPlugin } from '@univerjs/ui'

univer.registerPlugin(UniverUIPlugin, {
  ribbonType: 'grid',
  menu,
})
```

#### Modo preestablecido

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import { createUniver } from '@univerjs/presets'

const { univerAPI } = createUniver({
  presets: [
    UniverSheetsCorePreset({
      ribbonType: 'grid',
      menu,
    }),
  ],
})
```

### Actualizaciones en tiempo de ejecución

La Facade pública combina los cambios y actualiza la interfaz inmediatamente. Las propiedades omitidas conservan su configuración anterior o los valores predeterminados del esquema. La configuración también se aplica a los menús registrados posteriormente. En modo de complemento, importe primero `@univerjs/ui/facade`.

```ts
import '@univerjs/ui/facade'

univerAPI.updateMenuConfig({
  'sheet.command.set-range-bold': {
    order: 0,
    gridLayout: { row: 2, column: 2 },
  },
  'sheet.command.set-range-italic': {
    gridLayout: { row: 2, column: 1 },
  },
})
```

`gridLayout` solo se aplica a `ribbonType: 'grid'`. Cada grupo tiene dos filas; `row` y `column` comienzan en 1. Las coordenadas explícitas determinan la posición, por lo que cambiar solo `order` no mueve un botón ya posicionado. Al intercambiar posiciones, actualice ambos botones para evitar solapamientos. Los campos opcionales son `rowSpan`, `columnSpan`, `showLabel`, `width` e `iconSize`; los tamaños se expresan en píxeles. Consulte [`IRibbonGridLayout`](https://docs.univer.ai/es-ES/reference/packages/plugins/univerjs/ui.md#iribbongridlayout) para conocer las restricciones y los valores predeterminados.

### Posición de un menú personalizado

`createMenu()` y `createSubmenu()` también aceptan `order` y `gridLayout`. Para un submenú, estas opciones controlan su activador en el Ribbon, no el contenido del menú desplegable. Este ejemplo añade un botón en la tercera columna del grupo Historial:

```ts
univerAPI
  .createMenu({
    id: 'custom-action',
    title: 'Custom action',
    action: () => console.log('Custom action clicked'),
    order: 4,
    gridLayout: { row: 1, column: 3, showLabel: true, width: 96 },
  })
  .appendTo('ribbon.start.history')
```

## Lista de ID de elementos del menú

> [!NOTE]
> Puede encontrar el ID del elemento del menú a través del atributo `data-u-command` en el elemento DOM del elemento del
> menú.

### Elementos del menú de la barra de herramientas

| ID de elemento de menú                                | Nombre de elemento de menú                             |
| ----------------------------------------------------- | ------------------------------------------------------ |
| univer.command.undo                                   | Undo                                                   |
| univer.command.redo                                   | Redo                                                   |
| sheet.command.set-once-format-painter                 | Formato de pintura                                     |
| sheet.command.set-range-bold                          | Bold                                                   |
| sheet.command.set-range-italic                        | Italic                                                 |
| sheet.command.set-range-underline                     | Underline                                              |
| sheet.command.set-range-stroke                        | Strikethrough                                          |
| sheet.command.set-range-font-family                   | Font                                                   |
| sheet.command.set-range-fontsize                      | Tamaño de fuente                                       |
| sheet.command.set-range-text-color                    | Color de texto                                         |
| sheet.command.set-background-color                    | Color de relleno                                       |
| sheet.command.set-border-basic                        | Border                                                 |
| sheet.command.set-horizontal-text-align               | Alineación horizontal                                  |
| sheet.command.set-vertical-text-align                 | Alineación vertical                                    |
| sheet.command.set-text-wrap                           | Ajuste de texto                                        |
| sheet.command.set-text-rotation                       | Rotación de texto                                      |
| sheet.command.add-worksheet-merge                     | Fusionar celdas                                        |
| sheet.command.add-worksheet-merge-all                 | Fusionar celdas - Fusionar todo                        |
| sheet.command.add-worksheet-merge-vertical            | Fusionar celdas - Fusión vertical                      |
| sheet.command.add-worksheet-merge-horizontal          | Fusionar celdas - Fusión horizontal                    |
| sheet.command.remove-worksheet-merge                  | Fusionar celdas - Cancelar fusión                      |
| sheet.operation.open.conditional.formatting.panel     | Formato condicional                                    |
| formula-ui.operation.insert-function                  | Functions                                              |
| formula-ui.operation.more-functions                   | Funciones - Más funciones                              |
| sheet.menu.sheets-sort                                | Sort                                                   |
| sheet.command.sort-range-asc                          | Ordenar - Ascendente                                   |
| sheet.command.sort-range-asc-ext                      | Ordenar - Expandir Ascendente                          |
| sheet.command.sort-range-desc                         | Ordenar - Descendente                                  |
| sheet.command.sort-range-desc-ext                     | Ordenar - Expandir Descendente                         |
| sheet.command.sort-range-custom                       | Ordenar - Personalizado Ordenar                        |
| sheet.menu.image                                      | Image                                                  |
| sheet.command.insert-float-image                      | Imagen - Imagen flotante                               |
| sheet.command.insert-cell-image                       | Imagen - Imagen de celda                               |
| sheet.command.numfmt.set.currency                     | Currency                                               |
| sheet.command.numfmt.add.decimal.command              | Aumentar decimales                                     |
| sheet.command.numfmt.subtract.decimal.command         | Decrecer decimales                                     |
| sheet.command.numfmt.set.percent                      | Percentage                                             |
| sheet.operation.open.numfmt.panel                     | Formato de números                                     |
| sheet.menu.data-validation                            | Validación de datos                                    |
| data-validation.operation.open-validation-panel       | Validación de datos - Gestión de validación de datos   |
| data-validation.command.addRuleAndOpen                | Validación de datos - Agregar regla                    |
| sheet.command.smart-toggle-filter                     | Alternar filtro                                        |
| sheet.command.clear-filter-criteria                   | Alternar filtro - Borrar condiciones de filtro         |
| sheet.command.re-calc-filter                          | Alternar filtro - Volver a calcular filtro Condiciones |
| sheet.operation.open-pivot-table-range-selector-panel | Tabla dinámica                                         |
| sheet.menu.print                                      | Print                                                  |
| sheet.operation.print-open                            | Imprimir - Imprimir                                    |
| sheet.operation.open-print-grid-sidebar               | Imprimir - Imprimir diseño                             |
| data-connector.operation.sidebar                      | Conector de datos                                      |
| sheet.command.menu-insert-chart                       | Insertar gráfico                                       |
| sheet.command.add-range-protection-from-toolbar       | Protection                                             |
| univer.operation.toggle-edit-history                  | Editar historial                                       |
| sheet.operation.open-sparkline-selector               | Sparkline                                              |
| sheet.operation.toggle-comment-panel                  | Gestión de comentarios                                 |
| sheet.operation.insert-hyper-link-toolbar             | Insertar enlace                                        |
| ui.operation.open-find-dialog                         | Buscar y reemplazar                                    |
| base-ui.operation.toggle-shortcut-panel               | Alternar panel de accesos directos                     |
| sheet.toolbar.text-to-number                          | Texto al número                                        |

### Elementos del menú contextual

| ID de elemento de menú                                  | Nombre de elemento de menú                                                   |
| ------------------------------------------------------- | ---------------------------------------------------------------------------- |
| sheet.command.copy                                      | Copy                                                                         |
| sheet.command.cut                                       | Cut                                                                          |
| sheet.command.paste                                     | Paste                                                                        |
| sheet.menu.copy-special                                 | Copiar especial                                                              |
| sheet.command.copy-formula-only                         | Copiar especial - Copiar solo fórmula                                        |
| sheet.menu.paste-special                                | Pegado especial                                                              |
| sheet.command.paste-values                              | Pegado especial - Pegar valor                                                |
| sheet.command.paste-format                              | Pegado especial - Pegar formato                                              |
| sheet.command.paste-col-width                           | Pegado especial - Pegar ancho de columna                                     |
| sheet.command.paste-besides-border                      | Pegado especial - Pegar además de estilos de borde                           |
| sheet.command.paste-formula                             | Pegado especial - Pegar fórmula                                              |
| sheet.menu.clear-selection                              | Clear                                                                        |
| sheet.command.clear-selection-content                   | Borrar - Borrar contenidos                                                   |
| sheet.command.clear-selection-format                    | Borrar - Borrar formatos                                                     |
| sheet.command.clear-selection-all                       | Borrar - Borrar todo                                                         |
| sheet.contextMenu.text-to-number                        | Texto a número                                                               |
| sheet.menu.cell-insert                                  | Insert                                                                       |
| sheet.command.insert-row-before                         | Insertar - Insertar fila antes                                               |
| sheet.command.insert-col-before                         | Insertar - Insertar columna antes                                            |
| sheet.command.insert-range-move-right-confirm           | Insertar - Mover hacia la derecha                                            |
| sheet.command.insert-range-move-down-confirm            | Insertar - Mover hacia abajo                                                 |
| sheet.menu.delete                                       | Delete                                                                       |
| sheet.command.remove-row-confirm                        | Eliminar fila seleccionada                                                   |
| sheet.command.remove-col-confirm                        | Eliminar columna seleccionada                                                |
| sheet.command.delete-range-move-left-confirm            | Eliminar - Mover hacia la izquierda                                          |
| sheet.command.delete-range-move-up-confirm              | Eliminar - Mover hacia arriba                                                |
| sheet.menu.sheet-frozen                                 | Freeze                                                                       |
| sheet.header-menu.sheet-frozen                          | Inmovilizar (clic derecho en encabezado de fila y columna) Elemento de menú) |
| sheet.command.set-selection-frozen                      | Congelar - Congelar                                                          |
| sheet.command.set-row-frozen                            | Congelar - Congelar en esta fila                                             |
| sheet.command.set-col-frozen                            | Congelar - Congelar en esta columna                                          |
| sheet.command.cancel-frozen                             | Congelar - Cancelar congelación                                              |
| sheet.contextMenu.permission                            | Proteger filas y columnas                                                    |
| sheet.command.add-range-protection-from-context-menu    | Proteger filas y columnas - Agregar rango de protección                      |
| sheet.command.set-range-protection-from-context-menu    | Proteger filas y columnas - Establecer rango de protección                   |
| sheet.command.delete-range-protection-from-context-menu | Proteger filas y columnas - Eliminar protección Rango                        |
| sheet.command.view-sheet-permission-from-context-menu   | Proteger filas y columnas - Ver todos los rangos de protección               |
| sheet.menu.sheets-sort-ctx                              | Sort                                                                         |
| sheet.command.sort-range-asc-ctx                        | Ordenar - Ascendente                                                         |
| sheet.command.sort-range-asc-ext-ctx                    | Ordenar - Expandir Ascendente                                                |
| sheet.command.sort-range-desc-ctx                       | Ordenar - Descendente                                                        |
| sheet.command.sort-range-desc-ext-ctx                   | Ordenar - Expandir Descendente                                               |
| sheet.command.sort-range-custom-ctx                     | Ordenar - Ordenar personalizado                                              |
| sheet.operation.show-comment-modal                      | Agregar comentario                                                           |
| sheet.operation.insert-hyper-link                       | Insertar enlace                                                              |
| sheet.operation.screenshot                              | Copiar como imagen                                                           |

### Elementos del menú contextual: encabezado de fila

| ID de elemento de menú                  | Elemento de menú Nombre   |
| --------------------------------------- | ------------------------- |
| sheet.command.insert-multi-rows-above   | Insertar fila antes       |
| sheet.command.insert-multi-rows-after   | Insertar fila después     |
| sheet.command.hide-row-confirm          | Ocultar fila seleccionada |
| sheet.command.set-selected-rows-visible | Mostrar fila oculta       |
| sheet.command.set-row-height            | Altura de fila            |
| sheet.command.set-row-is-auto-height    | Ajustar a datos           |

### Elementos del menú contextual: encabezado de columna

| ID de elemento de menú                  | Nombre de elemento de menú   |
| --------------------------------------- | ---------------------------- |
| sheet.command.insert-multi-cols-before  | Insertar columna antes       |
| sheet.command.insert-multi-cols-right   | Insertar columna después     |
| sheet.command.hide-col-confirm          | Ocultar columna seleccionada |
| sheet.command.set-selected-cols-visible | Mostrar ocultar Columna      |
| sheet.command.set-worksheet-col-width   | Ancho de columna             |
| sheet.command.set-col-auto-width        | Ajustar a datos              |