@abw/badger-ui 中文文档教程
Badger-UI
badger-ui 库包含 React 组件和相应的 用于呈现各种用户界面组件的样式。 它是 由 Andy Wardley 撰写并经过多年的发展 为各种客户开发网站组件。
欢迎您使用它，但请注意，它不是官方的 已发布 UI 库，但不提供保修、支持和 保证将来会维护它。 它被释放了 作为公共 NPM 存储库只是为了让他更容易包含 它在其他项目中。
Using the badger-ui Library
将 badger-ui 库添加到您的项目中。
注意：这些示例假设您使用的是
yarn，但使用npm的等效方法也可以。
cd your-project
yarn add @abw/badger-ui
然后你可以将 badger-ui 组件导入到你的 React 组件中。
import { Button } from '@abw/badger-ui'
export const ShowButton = () =>
<Button text="Hello World" color="red" solid/>
您还需要导入 badger-ui CSS 文件或 使用 SASS 构建您自己的自定义样式表版本。
Importing CSS
要使用默认 CSS 样式，请将主 CSS 文件导入 您项目的顶级文件之一：
import '@abw/badger-ui/dist/styles/badger-ui.css'
Customising Styles Using SASS
您可以使用 SASS 自定义样式。
创建自己的样式表 并定义变量来覆盖默认值（抱歉，这些 尚未在任何地方记录，因此您需要深入挖掘 在 src/styles/config 和 src/styles/components 中查看文件 他们是）。 然后导入 badger-ui 样式。
// custom configuration variables
$orange: #FF7F00;
$alert-radius: 10px;
$checkbox-padding: 2px 4px;
// import badger-ui styles
@import "@abw/badger-ui/dist/styles/badger-ui.scss";
然后，您应该将此自定义样式表导入到您的应用程序中。
Custom Icons
badger-ui 库使用了 Fontawesome 集合中的许多图标。
您几乎肯定会想要为此添加更多图标 集合，要么包含额外的 Fontawesome 图标 或自定义 SVG 图标。 请参阅 README 文件 在 icons 目录中获取更多信息。
Updating the badger-ui Library
如果您要修改或扩展 badger-ui，请按照以下步骤操作 图书馆。 这些说明是为了作者的利益和 不适合最终用户。
首先安装所有依赖项。
yarn install
使用以下命令构建库。 输出文件 将被写入 dist 目录。
yarn build
运行以下命令查看显示的Storybook 组件的实际应用示例。
yarn storybook
要检查源代码是否存在潜在错误，请运行 eslint 使用这个命令。
yarn lint
如果你想删除 dist 构建目录，你可以运行 这个命令。
yarn clean
请注意，这会在您运行 yarn build 时自动发生。
Author
安迪·沃德利 abw@wardley.org 2018 年至 2022 年
Badger-UI
The badger-ui library contains React components and corresponding styles for rendering various user interface components. It was written by Andy Wardley and evolved over a number of years as he developed web site components for various customers.
You are welcome to use it, but be warned that it is not an officially released UI library and it comes with no warranty, no support and no guarantees that it will be maintained in the future. It was released as a public NPM repository simply to make it easier for him to include it in other projects.
Using the badger-ui Library
Add the badger-ui library to your project.
NOTE: These examples assume you're using
yarnbut the equivalent usingnpmwill also work.
cd your-project
yarn add @abw/badger-ui
Then you can import badger-ui components into your React components.
import { Button } from '@abw/badger-ui'
export const ShowButton = () =>
<Button text="Hello World" color="red" solid/>
You will also need to import the badger-ui CSS file or build your own custom stylesheet version using SASS.
Importing CSS
To use the default CSS styles import the main CSS file into one of the top-level files for you project:
import '@abw/badger-ui/dist/styles/badger-ui.css'
Customising Styles Using SASS
You can customise the styles using SASS.
Create your own stylesheet and define variables to override the default values (sorry, these aren't documented anywhere yet so you'll need to dig through the files in src/styles/config and src/styles/components to see what they are). Then import the badger-ui styles.
// custom configuration variables
$orange: #FF7F00;
$alert-radius: 10px;
$checkbox-padding: 2px 4px;
// import badger-ui styles
@import "@abw/badger-ui/dist/styles/badger-ui.scss";
You should then import this custom stylesheet into your application.
Custom Icons
The badger-ui library uses a number of icons from the Fontawesome collection.
You will almost certainly want to add further icons to this collection, either incorporating addition Fontawesome icons or custom SVG icons. See the README file in the icons directory for further information.
Updating the badger-ui Library
Follow these steps if you're amending or extending the badger-ui library. These instruction are for the benefit of the author and not intended for end users.
First install all the dependencies.
yarn install
Build the library using the following command. Output files will be written to the dist directory.
yarn build
Run the following command to view the Storybook showing examples of the components in action.
yarn storybook
To check the source code for potential errors, run eslint using this command.
yarn lint
If you want to delete the dist build directory you can run this command.
yarn clean
Note that this happens automatically when you run yarn build.
Author
Andy Wardley abw@wardley.org 2018 to 2022
