Guides

主题概述

使用主题组件来改变您的用户界面的外观和感觉。

解剖结构

主题组件 定义了您的应用程序的整体视觉外观。通过传递一组最小的配置选项,它可以进行自定义。

Sound

Yamaha THR
<Theme accentColor="mint" grayColor="gray" panelBackground="solid" scaling="100%" radius="full" >
<ThemesVolumeControlExample />
</Theme>

提供了一组良好的默认设置以帮助您入门,但不要害怕尝试所有可用选项,以找到适合您应用程序的正确视觉风格。查看 Playground 以了解每个选项的效果。

变体

变体是组件的视觉变化,用于创建视觉层次结构并传达相对重要性。

每个组件提供一组不同的变体,尽管所有变体都旨在保持一致和互补。

<Flex gap="3" align="center">
<Button variant="classic">
开始 <ArrowRightIcon />
</Button>
<Button variant="solid">
开始 <ArrowRightIcon />
</Button>
<Button variant="soft">
开始 <ArrowRightIcon />
</Button>
</Flex>

示例

结合组件变体和自定义主题设置,可以创建多种独特的界面。

例如,您可以创建:

或者任何数量的不同处理和样式。

Your profile

Privacy

Invoice paid

You paid $17,975.30. A receipt copy was sent to acc@example.com

令牌

令牌提供了对主题值的直接访问,并赋予您灵活性以构建和自定义自己的主题组件。

有关所有可用主题令牌的信息,请查看 源代码,或在相关主题页面中阅读每种类型的令牌的更多信息。