mirror of
https://github.com/element-plus/element-plus.git
synced 2025-12-19 09:09:40 +08:00
e3eff3725f
* feat(components): [button-group]:add vertical direction for button group * feat(components): [button-group]: add direction prop (update) * feat(components): [button-group]: fix docs * feat(components): [button-group]: update version * Update docs/en-US/component/button.md Co-authored-by: btea <2356281422@qq.com> * Update docs/en-US/component/button.md * chore: format * docs: improve sentence * docs: improve display example * refactor: enhance prop type - fit with segmented direction prop - enhance type according with https://github.com/element-plus/element-plus/pull/22757 --------- Co-authored-by: btea <2356281422@qq.com> Co-authored-by: Dsaquel <291874700n@gmail.com>
34 lines
917 B
Vue
34 lines
917 B
Vue
<template>
|
|
<el-button-group class="mb-4">
|
|
<el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
|
|
<el-button type="primary">
|
|
Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
|
|
</el-button>
|
|
</el-button-group>
|
|
<br />
|
|
<el-radio-group v-model="direction" class="mb-2">
|
|
<el-radio value="horizontal">Horizontal</el-radio>
|
|
<el-radio value="vertical">Vertical</el-radio>
|
|
</el-radio-group>
|
|
<br />
|
|
|
|
<el-button-group :direction="direction">
|
|
<el-button type="primary" :icon="House" />
|
|
<el-button type="primary" :icon="Operation" />
|
|
<el-button type="primary" :icon="Notification" />
|
|
</el-button-group>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import {
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
House,
|
|
Notification,
|
|
Operation,
|
|
} from '@element-plus/icons-vue'
|
|
|
|
const direction = ref<'horizontal' | 'vertical'>('horizontal')
|
|
</script>
|