紫外线UI

Ultraviolet UI是一组React组件和实用工具，用于构建快速的应用程序。

开始

$ pnpm add @ultraviolet/ui @ultraviolet/themes

您还需要通过添加以下内容来导入项目中的字体：

<link href="https://fonts.cdnfonts.com/css/inter?styles=29139,29137,29140" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604" rel="stylesheet" />
<link href="https://fonts.cdnfonts.com/css/space-grotesk?styles=24816,24815,24817" rel="stylesheet" />

或者如果你想为它安装软件包，你可以添加：

$ pnpm add @ultraviolet/fonts

并将其导入到您的项目中：

import '@ultraviolet/fonts'

使用

要使库正常工作，需要将应用程序包装为 ThemeProvider 组件从 @ultraviolet/themes。可以进入 theme 对象，只需直接从 @ultraviolet/themes 库:

import { theme } from '@ultraviolet/themes'

您还需要导入组件的样式，使它们具有正确的样式。

import { ThemeProvider, theme } from '@ultraviolet/themes'
import { Button } from '@ultraviolet/ui'
import '@ultraviolet/ui/styles' // <- components style

const App = () => (
  <ThemeProvider theme={theme}>
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  </ThemeProvider>
)

注意： 要轻松生成自己的主题，您可以检查 主题发电机.

从V2迁移到V3

随着从 @ultraviolet/ui 2.0.0 来 @ultraviolet/ui 3.0.0，引入了几个核心更改。这些变化是由于样式的转变 Emotion 来 vanilla-extract.

主题提供者

为确保库正常工作，必须将应用程序包装为 ThemeProvider 组件。从 @ultraviolet/themes 或者 @ultraviolet/ui (取代之前的 Emotion的提供者)。

如果你的应用仍然使用 Emotion，你可以组合这两个主题提供商：

import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
import { consoleLightTheme, ThemeProvider as UVThemeProvider } from '@ultraviolet/themes'

const App = () => (
  <UVThemeProvider theme={consoleLightTheme}>
    <EmotionThemeProvider theme={consoleLightTheme}>{children}</EmotionThemeProvider>
  </UVThemeProvider>
)

风格

为了确保样式被应用，在应用的根目录中导入组件样式：

import '@ultraviolet/ui/styles'

来取代 normalize() （这是用在情感上的），你现在可以导入一个具有相同效果的全局样式：

之前:

import { Global } from '@emotion/react'
import { normalize } from '@ultraviolet/ui'
import { ThemeProvider } from '@emotion/react'

const App = () => (
  <ThemeProvider theme={theme}>
      <Global styles={css`${normalize()}`}>
      <MyApp />
  </ThemeProvider>
)

后:

import { ThemeProvider } from '@ultraviolet/themes'
import '@ultraviolet/themes/global'

const App = () => (
  <ThemeProvider theme={theme}>
    <MyApp />
  </ThemeProvider>
)

文档

付款我们 文档的网站.

贡献

📝您可以参与开发和 开始贡献 到它。