<script setup lang="ts">
import { ElRadioGroup, ElRadioButton, ElRow, ElCol, ElSpace } from 'element-plus';
import { ref } from 'vue';
import '@/styles/radio.scss';

const radio = ref(1)
const span = 12
</script>

<template>
    <el-row class="layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import '@/styles/radio.scss';
<template>
 <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
        <el-radio-button :value="1">选项1</el-radio-button>
        <el-radio-button :value="2">选项2</el-radio-button>
        <el-radio-button :value="3">选项3</el-radio-button>
    </el-radio-group>
    
    <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
        <el-space :size="24">
            <el-radio-button :value="1">选项1</el-radio-button>
            <el-radio-button :value="2">选项2</el-radio-button>
            <el-radio-button :value="3">选项3</el-radio-button>
        </el-space>
    </el-radio-group>
</template>
`}}
</pre>
            <el-space direction="vertical" fill>
                <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
                    <el-radio-button :value="1">选项1</el-radio-button>
                    <el-radio-button :value="2">选项2</el-radio-button>
                    <el-radio-button :value="3">选项3</el-radio-button>
                </el-radio-group>
                <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
                    <el-space :size="24">
                        <el-radio-button :value="1">选项1</el-radio-button>
                        <el-radio-button :value="2">选项2</el-radio-button>
                        <el-radio-button :value="3">选项3</el-radio-button>
                    </el-space>
                </el-radio-group>
            </el-space>
        </el-col>
        <el-col :span="span">
            <pre>{{ `import '@/styles/radio.scss';\n <template>
    <el-radio-group class="radio-group-as-radius-btn">
    </el-radio-group>
</template>
        `}}
    </pre>
            <el-radio-group v-model="radio" class="radio-group-as-radius-btn">
                <el-space>
                    <el-radio-button v-for="item in 3" :key="item" :value="item">选项{{ item }} ></el-radio-button>
                </el-space>
            </el-radio-group>
        </el-col>
    </el-row>
</template>

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