Can the text of the <el-switch> switch component be inside the button?

[941477276]

Existing Component

是

Component Name

<el-switch>

Description

目前开关组件的active-text、inactive-text是在开关的两侧显示的，这在比较紧凑的布局页面中是无法实现与UI设计稿一致的。所以希望开关组件的active-text、inactive-text能放到开关里面去，如下图

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

Description

At present, the active-text and inactive-text of switch components are displayed on both sides of the switch, which can not be consistent with the UI design draft in a compact layout page. So I hope that the active-text and inactive-text of switch components can be put into the switch, as shown below.

image

[ziyoung]

Sorry, we have no plan to support this.

[cloydlau]

This will do it:

<template>
  <PopSwitch
    active-text="上架"
    inactive-text="下架"
  />
</template>

<script>
// install 'kikimore' first
import { PopSwitch } from 'kikimore'

export default {
  components: { PopSwitch }
}
</script>

Width is self-adapting, document here

[wuliupo]

在 1.x 支持这个功能，element-ui 2.x 和 element-plux 3.x 去掉了 @941477276
https://element.eleme.cn/1.4/#/zh-CN/component/switch