<script setup lang="ts">
import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss'
const span = 12
</script>

<template>
    <el-row :gutter="16" class="layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import '@/styles/tabs.scss';
<template>
    <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
    </el-tabs>
</template>
`}}
</pre>
            <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
                <el-tab-pane label="tab1">tab1</el-tab-pane>
                <el-tab-pane label="tab2">tab2</el-tab-pane>
                <el-tab-pane label="tab3">tab3</el-tab-pane>
            </el-tabs>
        </el-col>
        <el-col :span="span">
            <pre>{{ `import '@/styles/tabs.scss';\n<template>
    //确保父级position: relative;
    <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
</template>
        `}}
    </pre>
            <div style="margin-left: 160px;position: relative; height: 200px;">
                <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
                    <el-tab-pane label="tab1">tab1</el-tab-pane>
                    <el-tab-pane label="tab2">tab2</el-tab-pane>
                    <el-tab-pane label="tab3">tab3</el-tab-pane>
                </el-tabs>
            </div>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped></style>