Skip to main content

Changing a display mode

Changing the default display mode​

File Manager provides the following display modes for viewing files:

  • cards: this mode displays files as tiles
  • table: in this mode you can view files list with files details, such as file size and its creation date
  • panels: in this mode you can view files in two separate panels, which enables you to open two different folders and work with them simultaneously.
  • search: only search results are displayed

The cards display mode is set by default. To change the default display mode, use the mode property.

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

<template>
  <Filemanager
   :data="getData()"
   :mode="'table'" />
</template>

Disabling the change of modes​

The widget API allows keeping only one view mode in GUI by disabling the switching of modes. To block the modes switching, apply the set-mode action by returning false from the callback function.

Example:

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

  function init(api){
    api.intercept("set-mode", ({ mode }) => {
      console.log(`New mode: ${mode}`);
      return false; //block the change
    });
  }
</script>

<template>
  <Filemanager 
   :init="init"
   :data="getData()"
   :drive="getDrive()"
   :mode="'cards'" />
</template>