Side panel

import { WuiSidePanel } from "@wui/wui-vue/lib/side-panel";

Description

The <wui-side-panel> component is a UI modified modal which is intended to display more detailed data record positions. It is used in combination with a table that shows data records that can be opened and edited by the user in the side panel without leaving the actual page.

Available in WuiVue since v.3.0.3.

<template>
  <div>
    <wui-button variant="primary" @click="handleBtnOpenEvent"
      >{ panelShow ? "Close" : "Open" } demo side panel</wui-button
    >
    <wui-side-panel
      v-model="panelShow"
      id="customSidePanel"
      title="Side panel title"
    >
      Side panel default slot
    </wui-side-panel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        panelShow: false,
      };
    },
  };
</script>

Overview

The side panel component is based on the WUI Modal and therefore supports some ot its features (see the component reference).

You can override the side-panel title via the named slot title, override the header completely via the header slot.

Toggle side-panel visibility

There are several methods that you can employ to toggle the visibility of <wui-side-panel/>.

Using v-model property

v-model property is always automatically synced withvisible state and you can show/hide using v-model.

<template>
  <div>
    <wui-button @click="sidePanelShow = !sidePanelShow"
      >Open Side Panel</wui-button
    >

    <wui-side-panel v-model="sidePanelShow"
      >Hello From Side Panel!</wui-side-panel
    >
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sidePanelShow: false,
      };
    },
  };
</script>

When using the v-model prop, do not use the visible prop at the same time.

Using show(), hide(), and toggle() component methods

You can access modal using ref attribute and then call the show(), hide() or toggle() methods.

<template>
  <div>
    <wui-button id="show-btn" @click="showSidePanel"
      >Open Side Panel</wui-button
    >
    <wui-button id="toggle-btn" @click="toggleSidePanel"
      >Toggle Side Panel</wui-button
    >

    <wui-side-panel ref="my-side-panel" title="Using Component Methods">
      <div class="display--block text--center">
        <h3>Hello From My Side Panel!</h3>
      </div>
      <wui-button
        class="mt-3"
        variant="danger"
        outline
        block
        @click="hideSidePanel"
        >Close Me</wui-button
      >
      <wui-button
        class="mt-2"
        variant="warning"
        outline
        block
        @click="toggleSidePanel"
        >Toggle Me</wui-button
      >
    </wui-side-panel>
  </div>
</template>

<script>
  export default {
    methods: {
      showSidePanel() {
        this.$refs["my-side-panel"].show();
      },
      hideSidePanel() {
        this.$refs["my-side-panel"].hide();
      },
      toggleSidePanel() {
        // We pass the ID of the button that we want to return focus to
        // when the side panel has hidden
        this.$refs["my-side-panel"].toggle("#toggle-btn");
      },
    },
  };
</script>

The hide() method accepts an optional string trigger argument for defining what triggered the side panel to close. See section Prevent Closing in the modal documentation for details.

Side panel content

Using the side menu

The side panel offers the possibility to display an extended menu in an extra column (slot sidenav). The menu should contain navigation items that lead to similar items that are shown in detail in the content area.

Since the side menu and the content area are created by you, it is your responsibility to create the click handling accordingly (click in the left menu changes the content area and the title).

<template>
  <div>
    <wui-button @click="sidePanelShow = !sidePanelShow"
      >Open Side Panel</wui-button
    >

    <wui-side-panel v-model="sidePanelShow" :title="title">
      <template #sidenav>
        <ul>
          <li><a href="#" @click.prevent="handleClick(1)">Item 1</a></li>
          <li><a href="#" @click.prevent="handleClick(2)">Item 1</a></li>
        </ul>
      </template>
      <template #default>Show details of item #{ currentItem }</template>
    </wui-side-panel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sidePanelShow: false,
        currentItem: 1,
      };
    },
    computed: {
      title() {
        return `Item #${this.currentItem}`;
      },
    },
    methods: {
      handleClick(itemId) {
        this.currentItem = itemId;
      },
    },
  };
</script>

If you use the sidenav slot, a button is automatically displayed in the header to open and close the side menu. The tooltip text of the button can be changed with the two side panel props titleSideNavHide and titleSideNavShow.

Side panel size

The width of the side panel depends on whether the wescale menu is collapsed or expanded.

The side panel also offers the option of expanding the panel across the entire width of the page, whereby the wescale menu will always remain visible. Using an expand button in the side panel, the user can expand the panel or reset it to its normal state.

The initial status can be set via the expanded property:

<template>
  <div>
    <wui-button variant="primary" @click="handleBtnOpenEvent"
      >{ panelShow ? "Close" : "Open" } demo side panel</wui-button
    >
    <wui-side-panel
      v-model="panelShow"
      title="Side panel title"
      :expanded="true"
    >
      Side panel in expanded state
    </wui-side-panel>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        panelShow: false,
      };
    },
  };
</script>

The expand property is ignored as soon as the user changes the expand status via the corresponding button. The side panel event expand with the new status as event parameter (true or false) will be emitted as soon as the status is changed by the user.

Component reference

<wui-side-panel>

Properties

The side panel component is based on the WUI Modal and supports the following modal prop features:

• bodyClass,
• busy,
• contentClass,
• dialogClass,
• footerClass,
• headerClass,
• hideBackdrop,
• id,
• lazy,
• modalClass,
• noCloseOnBackdrop,
• noCloseOnEsc,
• noEnforceFocus,
• returnFocus,
• static,
• title,
• titleClass,
• titleTag,
• visible (v-model),

All other attributes and WUI modal event listeners are supported and forwarded to the wui-modal component. This means that all events triggered by the modal are also supported.

v-model

Slots

Events

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Example

import { SidePanelPlugin } from "@wui/wui-vue/lib/side-panel";
Vue.use(SidePanelPlugin);