Skip to main content

Configuring panels settings

In the panels mode you can set the panel that will be active in all modes, define the initially opened folder as well as selected folders/files.

Setting the active panel​

To define which panel should be active (right or left), you should apply the activePanel property and set its value to 0 (for the left panel, default) or 1 (for the right panel).

Example:

<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
  import { getData, getDrive } from "./common/data";
</script>

<template>
  <Filemanager
    :data="getData()"
    :drive="getDrive()"
    :activePanel="1" />
</template>

Setting the default path​

To define the initially opened folder, apply the path parameter of the panels property by setting its value to the required path. The default path is "/".

<script setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "@svar-ui/vue-filemanager";

  const panels = [
    {
      path: "/Code",
      selected: ["/Code/Datepicker"],
    },
  ];
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" :panels="panels" />
</template>

Marking files/folders as selected​

To define which files/folders should be marked as selected in the panels mode, apply the selected parameter of the panels property by adding the files/folders paths to the selected array. No items are selected by default.

<script setup>
  import { getData, getDrive } from "./common/data";
  import { Filemanager } from "@svar-ui/vue-filemanager";

  const panels = [
    {
      path: "/",
      selected: ["/Music", "/Code"],
    },
  ];
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" :panels="panels" />
</template>

Related sample: Initial path selection