Page Aside

The page aside (or sidebar) is a configurable slot that allows you to add custom content for personalized display. It can also be linked with the toolbar; see Toolbar extensions for details.

AI Chat Assistant is implemented through the page aside, see AI Chat Assistant for details.

Demo Video

Page Aside Configuration

const defaultOptions = {
  // Page aside related configuration
  page: {
    aside: {
      show: [],
      extensions: [],
    },
  },
}

Configuration Description

page.aside.show

Description：Page aside display configuration. You can use openAside and closeAside methods to dynamically display or hide the page aside.

Type：Array

Configuration Example

aside: {
  show: ['office', 'plugins'], // display the side panel collection in order
},

page.aside.extensions

Description：Page aside extension configuration that allows for dynamic injection of personalized page asides.

Type：Array

Configuration Items

title：String，display name for the custom extension page aside.
key：String，is the unique identifier for the custom extension page aside, serving as the basis for slot injection. It must be unique and not duplicate default group identifiers (e.g., chatPage cannot be set).

Configuration Example

aside: {
  extensions: [
    // Each item in the array represents a new group
    { title: 'Office Assistant', key: 'office' },
    { title: 'Extension Plugins', key: 'plugins' },
  ],
},

Slot Configuration

The slot setting is the same as the standard toolbar slot format, the identifier is #page_aside_{key} and is processed based on the key value in the extension configuration item.

Slot Example

<template #page_aside_office="props">
  <span>page_aside_office slot：{{ props }}</span>
</template>
<template #page_aside_plugins="props">
  <span>page_aside_plugins slot：{{ props }}</span>
</template>

Page Aside Slot

Through named slots, insert custom content into the page aside.

<template>
  <umo-editor v-bind="options">
    <template #page_aside_office="props">
      <span>page_aside_office slot：{{ props }}</span>
    </template>
    <template #page_aside_plugins="props">
      <span>page_aside_plugins slot：{{ props }}</span>
    </template>
  </umo-editor>
</template>
 
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor'
 
const options = ref({
  // Configuration items
  // ...
  page: {
    aside: {
      show: ['office', 'plugins'],
      extensions: [
        { title: '办公助手', key: 'office' },
        { title: '扩展插件', key: 'plugins' },
      ],
    },
  },
})
</script>

Method List

openAside

Description：Opens the page aside panel using the provided identifier.

Parameters：extensions[].key，String，the unique identifier for the page aside.

Return Value：None

closeAside

Description：Closes the page aside panel using the provided identifier.

Parameters：extensions[].key，String，the unique identifier for the page aside.

Return Value：None

Toolbar Extensions Collaborative