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:

import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

<Filemanager
  data={getData()}
  drive={getDrive()}
  activePanel={1} />

Setting the default path​

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

import { getData, getDrive } from "./common/data";
import { Filemanager } from "@svar-ui/react-filemanager";

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

<Filemanager data={getData()} drive={getDrive()} panels={panels} />

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.

import { getData, getDrive } from "./common/data";
import { Filemanager } from "@svar-ui/react-filemanager";

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

<Filemanager data={getData()} drive={getDrive()} panels={panels} />

Related samples: Initial path selection