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>
 import { Filemanager } from "@wx/svelte-filemanager";
 import { getData, getDrive } from "./common/data";
 
</script>
 
<Filemanager
 data={getData()}
 mode={"table"} />

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>
  import { Filemanager } from "@wx/svelte-filemanager";
  import { getData, getDrive } from "./common/data";

  let api;

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

<Filemanager 
 bind:api
 data={getData()}
 drive={getDrive()}
 mode={"cards"} />