@adminjs/ 设计系统

此软件包由来自 行政部门 那样你就可以在外边用上所有的 adminjs 核心键.

它是在两个惊人的软件包的帮助下创建的:

• 样式组件
• 样式系统

确保检查出来 利用这个设计系统的全部潜力.

安装

yarn add @adminjs/design-system

设计系统需要 theme 所以,你必须使用它 ThemeProvider 从 styled-components 像这样:

import { ThemeProvider } from 'styled-components'

// theme is the default theme, which you can alter
import { theme, Button, Box, Icon } from '@adminjs/design-system'

const App = () => (
  <ThemeProvider theme={theme}>
    <Box>
      <Button>
        <Icon icon="Plus" />
        Click Me
      </Button>
      <Button variant="contained" ml="xl">
        I am important
      </Button>
    </Box>
  </ThemeProvider>
)

export default App

更改主题

设计系统提供默认值 主题。它包含所有参数,如粘贴、颜色、字体大小等。 对于所有可用的参数列表,请查看 主题谱。 。 。 .

但没有什么能妨碍你改变默认主题。 要做到这一点,你可以使用 combineStyles 方法 :

import { combineStyles } from '@adminjs/design-system`

const myTheme = combineStyles({
  colors: {
    primary100: '#000'
  }
})

// ...
<ThemeProvider theme={myTheme}>

更改特定组件

有时你可能想要改变特定组件的外观和感觉,而不是整个主题. 你可以做到这一点 styled 方法 @adminjs/design-system/styled-components数字 :

import { Button } from '@adminjs/design-system'
import { styled } from '@adminjs/design-system/styled-components'

const MyRoundedButton = styled(Button)`
  border-radius: 100px;
`

然后可以像普通按钮组件一样使用:

<MyRoundedButton variant="outlined" color="primary"> Rounded I am </MyRoundedButton>

构成部分

关于所有组件及其文件的清单,请到 adminjs.co (英语) 或拜访我们 故事书。 。 。 .

捆绑包

这个 npm 软件包也有捆绑的版本。 您可以在下面找到它们:

• node_modules/@adminjd/design-system/bundle.development.js
• node_modules/@adminjs/design-system/bundle.production.js (减)

(它们也可以通过使用 bundle 脚本 : yarn bundle 或者说 NODE_ENV=production yarn bundle(中文(简体) )

要使用它们, 您必须托管它们( 把它们放到您的“ 公用” 文件夹中) , 然后把它们放入您的页面头 :

<head>
  <!-- ... -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script
    crossorigin
    src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.js"
  ></script>
  <script crossorigin src="/bundle.development.js"></script>
  <!-- ... -->
</head>

贡献

如果您发现任何 UI 错误 - 请随意创建 PR .

故事书

此寄存器中还包含组件的故事,您也可以从我们 故事书 页 次 在本地运行故事书 只需运行:

yarn storybook

许可证

AdminJS拥有2023rst.software的版权. 它是一种自由软件,可按下列规定重新分配: 自由主义 文档.

关于 rst. 软件

我们是一个开放、友好的团队.

• 我们随时可以 雇用。 。 。 .
• 如果你想为我们工作.. 职业页面。 。 。 .