企企通产品部V6

Appearance

On this page

窗口大小拖拽调整 QMultipane ​

TIP

q-multipane、q-multipane-resizer 窗口大小拖拽调整组件; 使用 CSS3 Flexbox，支持 vertical 垂直和 horizontal 水平布局，支持固定和流动窗格。

使用示例 ​

vue
<template>
  <div id="example">
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css"
    />

    <div class="container">
      <header>
        <section class="hero">
          <div class="hero-body">
            <h1 class="title is-1">q-multipane demo</h1>
            <h2 class="subtitle">Resizable split panes for Vue.js.</h2>
          </div>
        </section>
      </header>

      <hr style="margin-bottom: 0" />

      <section class="hero">
        <div class="hero-body">
          <div class="columns">
            <div class="column">
              <h2 class="title">Vertical Panes</h2>
            </div>
            <div class="column is-narrow"></div>
          </div>
          <VerticalPanes></VerticalPanes>
        </div>
      </section>
      <section class="hero">
        <div class="hero-body">
          <div class="columns">
            <div class="column">
              <h2 class="title">Horizontal Panes</h2>
            </div>
            <div class="column is-narrow"></div>
          </div>
          <HorizontalPanes></HorizontalPanes>
        </div>
      </section>
      <section class="hero">
        <div class="hero-body">
          <div class="columns">
            <div class="column">
              <h2 class="title">Custom Resizer</h2>
            </div>
            <div class="column is-narrow"></div>
          </div>
          <CustomResizer></CustomResizer>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import VerticalPanes from "./components/VerticalPanes.vue";
import HorizontalPanes from "./components/HorizontalPanes.vue";
import CustomResizer from "./components/CustomResizer.vue";
</script>
vue
<template>
  <q-multipane class="vertical-panes" layout="vertical">
    <div
      class="pane"
      :style="{ minWidth: '100px', width: '150px', maxWidth: '200px' }"
    >
      <div>
        <h6 class="title is-6">Pane 1</h6>
        <p class="subtitle is-6">Fixed width.</p>
        <p>
          <small>
            <strong>Configured with:</strong><br />
            minWidth: 100px<br />
            width: 150px<br />
            maxWidth: 200px<br />
          </small>
        </p>
      </div>
    </div>
    <q-multipane-resizer></q-multipane-resizer>
    <div class="pane" :style="{ width: '25%', maxWidth: '50%' }">
      <div>
        <h6 class="title is-6">Pane 2</h6>
        <p class="subtitle is-6">Fluid width.</p>
        <p>
          <small>
            <strong>Configured with:</strong><br />
            width: 25%<br />
            maxWidth: 50%<br />
          </small>
        </p>
      </div>
    </div>
    <q-multipane-resizer></q-multipane-resizer>
    <div class="pane" :style="{ flexGrow: 1 }">
      <div>
        <h6 class="title is-6">Pane 3</h6>
        <p class="subtitle is-6">Takes remaining available space.</p>

        <p>
          <small>
            <strong>Configured with:</strong><br />
            flex-grow: 1<br />
          </small>
        </p>
      </div>
    </div>
  </q-multipane>
</template>

<style>
.vertical-panes {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}

.vertical-panes > .pane {
  text-align: left;
  padding: 15px;
  overflow: hidden;
  background: #eee;
}

.vertical-panes > .pane ~ .pane {
  border-left: 1px solid #ccc;
}
</style>
vue
<template>
  <q-multipane class="horizontal-panes" layout="horizontal">
    <div
      class="pane"
      :style="{ minHeight: '100px', height: '200px', maxHeight: '300px' }"
    >
      <div>
        <h6 class="title is-6">Pane 1</h6>
        <p class="subtitle is-6">Fixed height.</p>
        <p>
          <small>
            <strong>Configured with:</strong><br />
            minHeight: 100px<br />
            height: 200px<br />
            maxHeight: 300px<br />
          </small>
        </p>
      </div>
    </div>
    <q-multipane-resizer></q-multipane-resizer>
    <div class="pane" :style="{ height: '40%', maxHeight: '60%' }">
      <div>
        <h6 class="title is-6">Pane 2</h6>
        <p class="subtitle is-6">Fluid height.</p>
        <p>
          <small>
            <strong>Configured with:</strong><br />
            height: 40%<br />
            maxHeight: 60%<br />
          </small>
        </p>
      </div>
    </div>
    <q-multipane-resizer></q-multipane-resizer>
    <div class="pane" :style="{ flexGrow: 1 }">
      <div>
        <h6 class="title is-6">Pane 3</h6>
        <p class="subtitle is-6">Takes remaining available space.</p>

        <p>
          <small>
            <strong>Configured with:</strong><br />
            flex-grow: 1<br />
          </small>
        </p>
      </div>
    </div>
  </q-multipane>
</template>

<style>
.horizontal-panes {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
}

.horizontal-panes > .pane {
  text-align: left;
  padding: 15px;
  overflow: hidden;
  background: #eee;
}

.horizontal-panes > .pane ~ .pane {
  border-top: 1px solid #ccc;
}
</style>
vue
<template>
  <q-multipane class="custom-resizer" layout="vertical">
    <div class="pane">
      <div>
        <h6 class="title is-6">Pane 1</h6>
      </div>
    </div>
    <q-multipane-resizer class="custom"></q-multipane-resizer>
    <div class="pane">
      <div>
        <h6 class="title is-6">Pane 2</h6>
      </div>
    </div>
    <q-multipane-resizer class="custom"></q-multipane-resizer>
    <div class="pane" :style="{ flexGrow: 1 }">
      <div>
        <h6 class="title is-6">Pane 3</h6>
      </div>
    </div>
  </q-multipane>
</template>

<style lang="scss">
.custom-resizer {
  width: 100%;
  height: 400px;
}

.custom-resizer > .pane {
  text-align: left;
  padding: 15px;
  overflow: hidden;
  background: #eee;
  border: 1px solid #ccc;
}
</style>

示例 ​

basicModal.jpg