组件 · 设置 · 原生 HTML 与 React

外观设置组 Appearance

主题、圆角、主色、密度、质感的现成设置组：Xxd.mountAppearance(container)。

演示

<div id="appearance"></div>

export function AppearanceDemo() {
  return (
    <XxdAppearanceProvider storageKey="xxd-site">
      <Settings style={{ maxWidth: 440 }}>
        <AppearanceSettings showFinish />
      </Settings>
    </XxdAppearanceProvider>
  );
}

属性与类名

属性 / 类名	说明
类名	xxd-swatches xxd-swatch

JS

Xxd.mountAppearance(el, { locale: "zh-CN", showDensity: false, lockCorners: false, languages, onLanguage })
// 插件里：get/set 接 XxdExtension.createAppearanceStore({ key })

每个选项都是分段控件或开关，带 aria-label；色块是 radio，名字读得出来
文字跟 <html lang> 或 locale 参数走三语

规则

主题 · 圆角 · 主色 ·（密度）·（语言）—— 每个插件都要的那一组
会员站 lockCorners: true

设置组列表符号格