툴바 구성

툴바 구성

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

에디터에 상단 툴바 추가하기

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

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

<Editor {topBar} />

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

에디터에 하단 툴바 추가하기

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

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

<Editor {bottomBar} />

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

폼 값이 있는 상단 툴바 추가하기

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

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

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

<Editor {topBar} {values} />

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

툴바에 액션 메뉴 만들기

<script>
  import { Editor } from "@svar-ui/svelte-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>

<Editor {topBar} />

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

관련 샘플: Toolbar values