NovaEnvironment 环境容器

NovaEnvironment 统一向子树注入主题与语言上下文，让 Nova 系列组件共享 data-nova-theme 与多语言文案。可在应用根部或局部区域通过 import { NovaEnvironment } from 'nova-next' 包裹使用；更多安装说明可参考 快速开始。

示例

主题注入

预览

继承默认 theme

局部覆盖为 dark

局部覆盖为 light

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/button.css'
import { NovaEnvironment, NovaButton } from '@jiangshengdev/nova-next'
</script>

<template>
  <div class="demo-column">
    <section class="demo-surface">
      <p class="demo-title">继承默认 theme</p>
      <NovaButton>默认主题</NovaButton>
    </section>

    <NovaEnvironment theme="dark">
      <section class="demo-surface" data-nova-theme="dark">
        <p class="demo-title">局部覆盖为 dark</p>
        <NovaButton primary>深色主题</NovaButton>
      </section>
    </NovaEnvironment>

    <NovaEnvironment theme="light">
      <section class="demo-surface" data-nova-theme="light">
        <p class="demo-title">局部覆盖为 light</p>
        <NovaButton primary>浅色主题</NovaButton>
      </section>
    </NovaEnvironment>
  </div>
</template>

<style scoped>
.demo-column {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.demo-surface {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
}

.demo-surface[data-nova-theme='light'] {
  background-color: var(--nova-color-bg);
  color: var(--nova-color-font);
}

.demo-surface[data-nova-theme='dark'] {
  background-color: var(--nova-color-bg);
  color: var(--nova-color-font);
}

.demo-title {
  margin: 0;
  font-size: 14px;
}
</style>

语言与局部覆盖

预览

继承默认 language

局部 en-US

局部中文语言

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/dropdown.css'
import '@jiangshengdev/nova-next/styles/color-picker.css'
import { NovaColorPicker, NovaEnvironment, enUS, zhCN } from '@jiangshengdev/nova-next'
</script>

<template>
  <div class="demo-column">
    <section class="demo-surface">
      <p class="demo-title">继承默认 language</p>
      <NovaColorPicker value="#409eff" :preset="['#409eff', '#67c23a']" />
    </section>

    <NovaEnvironment :language="enUS" theme="dark">
      <section class="demo-surface" data-nova-theme="dark">
        <p class="demo-title">局部 en-US</p>
        <NovaColorPicker value="#909399" :preset="['#909399', '#303133']" />
      </section>
    </NovaEnvironment>

    <NovaEnvironment :language="zhCN" theme="light">
      <section class="demo-surface" data-nova-theme="light">
        <p class="demo-title">局部中文语言</p>
        <NovaColorPicker value="#f56c6c" :preset="['#f56c6c', '#e6a23c']" />
      </section>
    </NovaEnvironment>
  </div>
</template>

<style scoped>
.demo-column {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-surface {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
}

.demo-surface[data-nova-theme='light'] {
  background-color: var(--nova-color-bg);
  color: var(--nova-color-font);
}

.demo-surface[data-nova-theme='dark'] {
  background-color: var(--nova-color-bg);
  color: var(--nova-color-font);
}

.demo-title {
  margin: 0;
  font-size: 14px;
}
</style>

属性

名称	说明	类型	默认值
theme	覆盖当前子树使用的 Nova 主题。	string	继承上层环境
language	覆盖当前子树使用的语言包对象，控制 aria/提示等文案。	Language	继承上层环境

若不存在上层环境，组件会自动退回到 light 主题与 en-US 语言。

插槽

名称	说明
default	默认插槽，包裹需要注入的子节点。

事件

NovaEnvironment 不派发自定义事件。