Files
element-plus/docs/examples/tabs/card-style.vue
Noblet Ouways 2f17df1209 style(eslint-config): newline before import type (#21036)
* perf: change to import-x

* feat: add rules

* chore: fix rule

* chore: fix

* chore: fix

* chore: fix

* style: `pnpm lint:fix`

* Revert "style: `pnpm lint:fix`"

This reverts commit db0116a288299c507e3cfc4d7a22e2207265d920.

* Revert "chore: fix"

This reverts commit 69c82a90c01525e38180be4c21e8ef5602512318.

* chore: fix

* style: `pnpm lint:fix`

* fix: lint

* chore: `pnpm format`
2025-06-16 15:37:12 +08:00

35 lines
763 B
Vue

<template>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>