Panel

Panels typically consist of a header, body, and footer. In Hongluan, panels are mostly used as prompts, notifications, dialogs, or as containers outlining content areas, but their uses are not limited to these.

Basic Style

The Panel component includes three slots: header, body, and footer. body is the default slot.

这是一个标题

这是一段body信息

Example code

vue

<template>
  <epp-panel>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-icon>
          <close />
        </el-icon>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
</script>

Borderless Style

The borderless prop makes the Panel component borderless, and the spacing between them will also change.

这是一个标题

这是一段body信息

The outlineless prop can remove the outer outline border of the Panel.

vue

<template>
  <epp-panel borderless>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

Radius Prop

The radius prop changes the rounded corner style of the Panel component.

这是一个标题

这是一段body信息

Example code

vue

<template>
  <epp-panel radius="10px">
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

Padding Prop

The padding prop changes the padding size of the Panel component. body-padding controls the padding of the body separately and has higher priority than padding.

padding

body-padding

标题

这是一段body信息

Example code

vue

<template>
  <el-space size="large" class="m-b-lg">
    <el-select v-model="padding" clearable placeholder="padding" style="width: 150px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="bodyPadding" clearable placeholder="body-padding" style="width: 150px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </el-space>

  <epp-panel :padding="padding" :body-padding="bodyPadding">
    <template #header>
      <div class="panel-title">标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Monitor, FullScreen } from '@element-plus/icons-vue';

const options = ref([
  {
    value: '0',
    label: 'none',
  },
  {
    value: '8px',
    label: '8px',
  },
  {
    value: '16px',
    label: '16px',
  },
  {
    value: '20px',
    label: '20px',
  },
]);
const padding = ref('');
const bodyPadding = ref('');
</script>

Custom Class Names

The header-class, body-class, and footer-class props allow you to add custom classes to the corresponding header, body, and footer.

标题

这是一段body信息

Example code

vue

<template>
  <epp-panel padding="8px" header-class="new-header-class" body-class="new-body-class" footer-class="new-footer-class">
    <template #header>
      <div class="panel-title">标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle>
          <el-icon><Monitor /></el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { Monitor, FullScreen } from '@element-plus/icons-vue';
</script>

Simple Form

The Panel component allows removing the header and footer structure, giving you more flexibility in defining its use.

仅保留body区域 (有边框)

Example code

vue

<template>
  <epp-panel>
    <div>仅保留body区域 (有边框)</div>
  </epp-panel>
</template>
<script lang="ts" setup>
</script>

Extensible Header

The header slot can hold your custom elements and components, and you don't even need to define styles.

Title

Panel-Body

测试

对方正在输入中...

Panel-Body

Title

Panel-Body

Title

Panel-Body

Title

Panel-Body

Title

小贴士

Panel-Body

The header slot provides three layout styles: panel-header-left, panel-title, and panel-header-right.

vue

<template>
  <el-row :gutter="16">
    <el-col :span="12">
      <epp-panel footer-align="align-left">
        <template #header>
          <div class="panel-header-left">
            <el-icon size="20"><Monitor /></el-icon>
          </div>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <button class="panel-close"></button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12">
      <epp-panel>
        <template #header>
          <div class="panel-header-left">
            <el-tag type="primary">测试</el-tag>
          </div>
          <div class="panel-title">
            <h5>对方正在输入中...</h5>
          </div>
          <div class="panel-header-right">
            <button class="panel-close"></button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-input placeholder="请输入内容">
              <template #suffix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-button type="primary" icon-position="right">
              搜索
              <template #icon>
                <el-icon><Search /></el-icon>
              </template>
            </el-button>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <el-dropdown>
              <el-link type="primary">
                选择 <el-icon><ArrowDownBold /></el-icon>
              </el-link>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>数据流</el-dropdown-item>
                  <el-dropdown-item>传输属性值</el-dropdown-item>
                  <el-dropdown-item>已断线</el-dropdown-item>
                  <el-dropdown-item>待恢复</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>

    <el-col :span="12" class="m-t-lg">
      <epp-panel>
        <template #header>
          <div class="panel-title">Title</div>
          <div class="panel-header-right">
            <span class="text-danger">小贴士</span>
          </div>
        </template>
        Panel-Body
      </epp-panel>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { Monitor, ArrowDownBold, Search } from '@element-plus/icons-vue';
</script>

Advanced Features

The panel provides collapse and fullscreen features. You can use buttons to control them.

这是一个标题

这是一段body信息

You can set fullscreen to an object type to initialize the position of the fullscreen Panel.

vue

<template>
  <epp-panel :fullscreen="maxStatus" :collapsed="minStatus">
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-button type="success" circle @click="min">
          <el-icon><ZoomOut /></el-icon>
        </el-button>
        <el-button type="warning" circle @click="max">
          <el-icon><ZoomIn /></el-icon>
        </el-button>
      </div>
    </template>
    <div>这是一段body信息</div>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ZoomOut, ZoomIn } from '@element-plus/icons-vue';

const maxStatus = ref<boolean | Record<string, string>>(false);
const minStatus = ref(false);

const min = () => {
  minStatus.value = !minStatus.value;
};
const max = () => {
  if (maxStatus.value) {
    maxStatus.value = false;
  } else {
    maxStatus.value = { top: '16px', left: '16px', right: '16px', bottom: '16px' };
  }
};
</script>

Adaptive Body Area

You can set the full-body prop for the panel to make its panel-body automatically expand according to the height of the panel.

这是一个标题

这是一段body信息

You can add a structure with the scroll property to make the content scroll within the panel. It can automatically adapt to the height of the panel without setting the height of the scrolling area.

vue

<template>
  <epp-panel style="height: 220px" full-body>
    <template #header>
      <div class="panel-title">这是一个标题</div>
      <div class="panel-header-right">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
    </template>
    <el-scrollbar ref="scrollbarRef" height="100%" always>
      <div class="p-lg" style="height: 320px">这是一段body信息</div>
    </el-scrollbar>
    <template #footer>
      <el-button class="m-r-md">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </template>
  </epp-panel>
</template>

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue';
</script>

Attributes

Parameter	Description	Type	Optional Values	Default Value
borderless	Whether to remove the border	boolean	—	false
outlineless	Whether to remove the outline border	boolean	—	false
radius	Rounded corners	string	—	0
padding	Padding	string	—	20px
body-padding	Body padding	string	—	20px
footer-padding	Footer padding	string	—	20px
header-class	Custom class name for the header	string	—	-
header-style	Custom style for the header	string	—	-
body-class	Custom class name for the body	string	—	-
body-style	Custom style for the body	string	—	-
footer-class	Custom class name for the footer	string	—	-
footer-style	Custom style for the footer	string	—	-
fullscreen	Fullscreen mode	boolean / `object{top: string; left: string; bottom: stirng; right: string;}`	—	false
collapsed	Collapsed mode (collapsing is disabled in fullscreen mode)	boolean	—	false
full-body	Makes the `panel-body` automatically expand according to the height of the `panel`	boolean	—	false

Slots

Name	Description
—	Content of the Panel body
header	Content of the Panel header
footer	Content of the Panel footer

Panel ​

Basic Style Play ​

Borderless Style Play ​

Radius Prop Play ​

Padding Prop Play ​

Custom Class Names Play ​

Simple Form Play ​

Extensible Header Play ​

对方正在输入中...

Advanced Features Play ​

Adaptive Body Area Play ​

Attributes ​

Slots ​

Panel

Basic Style

Borderless Style

Radius Prop

Padding Prop

Custom Class Names

Simple Form

Extensible Header

Advanced Features

Adaptive Body Area

Attributes

Slots