@8base/boost 中文文档教程
8base UI Kit
Storybook - https://8base.github.io/boost/
Start local
yarn storybook
Update snapshots
docker pull vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
docker run --privileged --name e2e-chrome -p 9222:9222 -d vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
yarn e2e:update
Usage
Basic usage
import { BoostProvider, Button } from '@8base/boost';
const App = () => {
return (
<BoostProvider>
...
<Button>Some Text</Button>
</BoostProvider>
)
}
Usage with custom theme
import { BoostProvider, createTheme } from '@8base/boost';
const customTheme = createTheme({
/** Change the pallete of the color. */
COLORS: {
PRIMARY: '#3EB7F9',
PRIMARY_TEXT_COLOR: 'darkorange',
SECONDARY_TEXT_COLOR: 'orange',
},
/** Change the custom components styles if it needed. */
components: {
input: {
root: {
borderColor: 'gray',
},
modifiers: {
hasError: {
borderColor: 'red',
}
}
},
button: ({ COLORS, SIZES }) => ({
root: {
fontSize: SIZES.OVERLINE_1,
},
modifiers: {
disabled: {
backgroundColor: COLORS.RED,
},
},
}),
},
});
const App = () => {
return (
<BoostProvider theme={ customTheme }>
...
</BoostProvider>
)
}
Icons
Extends icons pack
要扩展图标包,你应该添加 babel-plugin-inline-react-svg 或描述 svg 组件手册。
import { BoostProvider, createTheme } from '@8base/boost';
import SomeSvgIcon from './some-svg-icon.svg';
import AnotherSvgIcon from './another-svg-icon.svg';
const icons = {
SomeSvgIcon,
AnotherSvgIcon,
}
const App = () => {
return (
<BoostProvider icons={ icons }>
...
<Icon name="AnotherSvgIcon" size="lg" color="RED" />
</BoostProvider>
)
}
Using with fontawesome
首先,您需要将 install awesome font 添加到 index.html 如 fontawesome 文档中所述。
import { BoostProvider, createTheme } from '@8base/boost';
const App = () => {
return (
<BoostProvider>
...
<Icon className="fas fa-igloo" color="RED" size="lg" />
</BoostProvider>
)
}
8base UI Kit
Storybook - https://8base.github.io/boost/
Start local
yarn storybook
Update snapshots
docker pull vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
docker run --privileged --name e2e-chrome -p 9222:9222 -d vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
yarn e2e:update
Usage
Basic usage
import { BoostProvider, Button } from '@8base/boost';
const App = () => {
return (
<BoostProvider>
...
<Button>Some Text</Button>
</BoostProvider>
)
}
Usage with custom theme
import { BoostProvider, createTheme } from '@8base/boost';
const customTheme = createTheme({
/** Change the pallete of the color. */
COLORS: {
PRIMARY: '#3EB7F9',
PRIMARY_TEXT_COLOR: 'darkorange',
SECONDARY_TEXT_COLOR: 'orange',
},
/** Change the custom components styles if it needed. */
components: {
input: {
root: {
borderColor: 'gray',
},
modifiers: {
hasError: {
borderColor: 'red',
}
}
},
button: ({ COLORS, SIZES }) => ({
root: {
fontSize: SIZES.OVERLINE_1,
},
modifiers: {
disabled: {
backgroundColor: COLORS.RED,
},
},
}),
},
});
const App = () => {
return (
<BoostProvider theme={ customTheme }>
...
</BoostProvider>
)
}
Icons
Extends icons pack
To expand icons pack you should add babel-plugin-inline-react-svg or describe svg components manual.
import { BoostProvider, createTheme } from '@8base/boost';
import SomeSvgIcon from './some-svg-icon.svg';
import AnotherSvgIcon from './another-svg-icon.svg';
const icons = {
SomeSvgIcon,
AnotherSvgIcon,
}
const App = () => {
return (
<BoostProvider icons={ icons }>
...
<Icon name="AnotherSvgIcon" size="lg" color="RED" />
</BoostProvider>
)
}
Using with fontawesome
At the first you need to add install awesome font to the index.html as described in the fontawesome docs.
import { BoostProvider, createTheme } from '@8base/boost';
const App = () => {
return (
<BoostProvider>
...
<Icon className="fas fa-igloo" color="RED" size="lg" />
</BoostProvider>
)
}