Apideck 组件库

一个开源的UI组件库,用于高效地开发美丽的React应用程序.

转到 开发者. apideck.com/ 组件 用于完整文件.

使用量

安装组件库

yarn add @apideck/components

风格被缩小到 apideck 类名所以将其添加到顶级父或正体标记中.

import { ModalProvider, ToastProvider } from '@apideck/components'
import { AppProps } from 'next/app'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <div className="apideck">
      <ModalProvider>
        <ToastProvider>{children}</ToastProvider>
      </ModalProvider>
    </div>
  )
}

export default App

使用工程中的组件 :

import { Button } from '@apideck/components'

const App = () => {
  return <Button variant="primary" size="large" text="Yo, world!" />
}

export default App

如果你是的话 没有 在您的项目中使用 Tailwind CSS, 请确保您的项目包含样式 :

import '@apideck/components/dist/styles.css'

组件库的样式使用 尾风 CSS如果您要在同样使用 Tailwind CSS 的项目中使用,则您不必包含 styles.css 文件,但您应当将软件包路径包含在内容路径中 tailwind.config.js。 。 。 .

// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/components/**/*.js'],
  ...
}

如果想要覆盖主色调, 您可以将您的自定义颜色添加到 primary 尾风配置中的颜色选项 :

// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/components/**/*.js'],
  theme: {
    extend: {
      colors: {
        primary: {
          50:  '#faf6f9',
          100: '#fae7f7',
          200: '#f5c4f3',
          300: '#f39dee',
          400: '#f469e7',
          500: '#f53fe1',
          600: '#e909ef',
          700: '#c81ead',
          800: '#9c1a81',
          900: '#7c1762',
        }
      }
    }
  }
  ...
}

构成部分

• 按钮
• 纸牌
• 检查框
• 输入日期
• 下坠
• 模式
• 选择
• 文本区
• 文本输入
• 土司
• 切换
• 工具提示

用户

• useModal 财务报告和审定财务报表 ModalProvider
• useToast 财务报告和审定财务报表 ToastProvider
• useOutsideClick
• usePrevious
• useDebounce

请参看 Apideck 文档 用于完整文件.