툴바 구성

툴바 구성

Editor 위젯을 사용하면 툴바를 추가하고 사용자 지정할 수 있습니다. 툴바는 편집기의 상단 또는 하단에 배치할 수 있으며, 버튼, 레이블, 메뉴 등의 인터랙티브 요소를 포함할 수 있습니다. 이러한 툴바는 사용자 상호작용을 향상시키고 특정 작업이나 정보에 빠르게 접근할 수 있도록 합니다.

편집기에 상단 툴바 추가하기

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const topBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", onclick: () => alert("clicked") },
    ],
  };
</script>

<template>
  <Editor :topBar="topBar" />
</template>

이 구성은 편집기에 상단 툴바를 추가합니다. 툴바에는 레이아웃 조정을 위한 spacer와 "Click me"라는 레이블의 버튼이 포함됩니다. 버튼을 클릭하면 알림 메시지가 표시됩니다. 이 설정은 중요한 작업이나 컨트롤을 편집기 상단에 배치하여 쉽게 접근할 수 있도록 하는 데 유용합니다.

편집기에 하단 툴바 추가하기

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const bottomBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", handler: () => alert("clicked") },
    ],
  };
</script>

<template>
  <Editor :bottomBar="bottomBar" />
</template>

이 구성은 편집기에 하단 툴바를 생성합니다. 상단 툴바와 마찬가지로 spacer와 클릭 시 알림을 표시하는 "Click me" 버튼이 포함됩니다. 이 레이아웃은 덜 중요하지만 여전히 쉽게 접근할 수 있어야 하는 작업이나 설정에 일반적으로 사용됩니다.

폼 값을 사용하는 상단 툴바 추가하기

<script setup>
  import { Editor } from "@svar-ui/vue-editor";
  import { Switch } from "@svar-ui/vue-core";

  const topBar = {
    items: [
      { comp: "label", spacer: true, key: "label" },
      { comp: Switch, key: "state" },
    ],
  };

  const values = {
    label: "Product N1",
    state: false
  };
</script>

<template>
  <Editor :topBar="topBar" :values="values" />
</template>

이 설정은 폼 값을 동적으로 사용하여 요소를 채우는 상단 툴바를 추가합니다. 레이블은 "label" 키의 값을 표시하고, 스위치는 "state" 키의 값을 전환합니다. 이 구성은 툴바 내에서 설정이나 메타데이터를 직접 표시하고 조정하는 데 이상적입니다.

툴바에 액션 메뉴 만들기

<script setup>
  import { Editor } from "@svar-ui/vue-editor";

  const topBar={
    items: [
      {
        comp: "label",
        spacer: true,
        text: "Item X12-A",
      },
      { comp: "separator" },
      {
        icon: "wxi-dots-v",
        collapsed: true,
        layout: "column",
        items: [
          {
           id: "done",
           comp: "item",
           text: "Mark as done",
           handler: buttonClick,
          },
          {
           id: "delete",
           comp: "button",
           type: "danger",
           text: "Delete the item",
           handler: buttonClick,
          },
        ],
      },
    ]
  };
</script>

<template>
  <Editor :topBar="topBar" />
</template>

이 구성은 상단 툴바 내에 액션 메뉴를 도입합니다. 메뉴는 레이블이 있는 항목, 구분선, 아이콘으로 활성화되는 드롭다운 메뉴로 구성됩니다. 드롭다운에는 "Mark as done" 및 "Delete the item"과 같은 옵션이 포함되며, 각각 특정 handler 함수가 지정됩니다. 이는 툴바를 복잡하게 만들지 않으면서 편집기의 콘텐츠나 상태와 관련된 컨텍스트 작업을 제공하는 데 특히 유용합니다.

관련 샘플: Toolbar values