自定义样式

自定义样式

SunlightRadio 支持丰富的自定义样式配置，您可以通过 wrapperStyle 对象来自定义单选框的边框颜色、聚焦样式和选中样式等。

自定义边框颜色

您可以自定义单选框的边框颜色和选中时的边框颜色。

自定义边框颜色

选项一选项二选项三选项四

选中值：option2

<script setup lang="ts">
import { ref } from "vue";
import { SunlightRadio } from "sunlight-ui";

const radioValue = ref('option2');
const options = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' },
  { label: '选项四', value: 'option4' }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <div style="margin-bottom: 8px;">自定义边框颜色</div>
      <SunlightRadio 
        v-model="radioValue" 
        :item="{
          options: options,
          wrapperStyle: {
            borderColor: '#909399',
            focusBorderColor: '#67c23a',
            focusBoxShadowColor: 'rgba(103, 194, 58, 0.1)'
          }
        }" 
      />
    </div>
    
    <div style="margin-top: 20px;">
      <p>选中值：{{ radioValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

隐藏源代码

自定义聚焦样式

您可以自定义单选框聚焦时的边框颜色和阴影效果。

自定义聚焦样式

选项一选项二选项三选项四

选中值：option2

<script setup lang="ts">
import { ref } from "vue";
import { SunlightRadio } from "sunlight-ui";

const radioValue = ref('option2');
const options = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' },
  { label: '选项四', value: 'option4' }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <div style="margin-bottom: 8px;">自定义聚焦样式</div>
      <SunlightRadio 
        v-model="radioValue" 
        :item="{
          options: options,
          wrapperStyle: {
            focusBorderColor: '#f56c6c',
            focusBoxShadowColor: 'rgba(245, 108, 108, 0.1)' 
          }
        }" 
      />
    </div>
    
    <div style="margin-top: 20px;">
      <p>选中值：{{ radioValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

隐藏源代码

自定义选中样式

您可以自定义单选框选中时的背景色和文字颜色。

自定义选中样式

选项一选项二选项三选项四

选中值：option2

<script setup lang="ts">
import { ref } from "vue";
import { SunlightRadio } from "sunlight-ui";

const radioValue = ref('option2');
const options = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' },
  { label: '选项四', value: 'option4' }
];
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <div style="margin-bottom: 8px;">自定义选中样式</div>
      <SunlightRadio 
        v-model="radioValue" 
        :item="{
          options: options,
          wrapperStyle: {
            focusBorderColor: '#67c23a' 
          }
        }" 
      />
    </div>
    
    <div style="margin-top: 20px;">
      <p>选中值：{{ radioValue || '暂无选择' }}</p>
    </div>
  </div>
</template>

隐藏源代码

文档说明

自定义样式概述

SunlightRadio 提供了强大的自定义样式能力，通过 wrapperStyle 对象可以灵活配置单选框的各种样式属性，实现完全自定义的视觉效果。

wrapperStyle 配置项

属性名	说明	类型	默认值
borderColor	单选框边框颜色	string	'#c0c4cc'
focusBorderColor	聚焦时边框颜色	string	'#409eff'
focusBoxShadowColor	聚焦时阴影颜色	string	'rgba(64, 158, 255, 0.1)'