快速开始

最小示例

<script setup lang="ts">
import { AConfigProvider, AButton, lightTheme } from '@aether/ui'
</script>

<template>
  <AConfigProvider :theme="lightTheme">
    <AButton type="primary">Hello Aether</AButton>
  </AConfigProvider>
</template>

切换暗色主题

<script setup lang="ts">
import { ref } from 'vue'
import { AConfigProvider, AButton, lightTheme, darkTheme } from '@aether/ui'

const isDark = ref(false)
</script>

<template>
  <AConfigProvider :theme="isDark ? darkTheme : lightTheme">
    <AButton @click="isDark = !isDark">
      {{ isDark ? '切换到亮色' : '切换到暗色' }}
    </AButton>
  </AConfigProvider>
</template>

ConfigProvider

AConfigProvider 是 Aether UI 的全局配置根组件。它提供：

• theme — 主题对象 (lightTheme / darkTheme)
• clsPrefix — CSS 类名前缀 (默认 'a')
• rtl — 是否启用从右到左布局

<AConfigProvider :theme="darkTheme" cls-prefix="a">
  <!-- 你的应用 -->
</AConfigProvider>

类名前缀

默认类名前缀为 a，所有组件类名格式为 a-button、a-input 等。

你可以通过 clsPrefix 自定义：

<AConfigProvider cls-prefix="my-app">
  <!-- 类名变为 my-app-button、my-app-input -->
</AConfigProvider>