文章目录
1,定位
React组件开发的文档脚手架。
编写好一个组件,稍加配置,即可拥有好看的文档。
2,搭建dumi项目
官方文档:https://d.umijs.org/zh-CN/guide
初始化一个dumi项目,启动它:
npx @umijs/create-dumi-lib
npm i
npx dumi dev
效果:
好看。
3,组件结构
入口,src下,注册所有组件。
export {
default as Foo } from './Foo';
组件。用文件夹区分。
md作为文档结构。
tsx代表一个组件。这一块会显示成一个组件的效果和源码。
4,举例:开关按钮
新建一个文件夹,Radio
新建index.tsx
import React from "react";
import "./index.css"
export default (props: {
data: boolean, toggle: () => void }) =>
(
<label className="checkbox">
<input type="checkbox" checked={
props.data} onChange={
e => props.toggle()}/>
</label>
)
新建index.css
.checkbox {
display: inline-block;
width: 100px;
height: 50px;
border-radius: 25px;
position: relative;
overflow: hidden;
}
.checkbox > input {
visibility: hidden;
}
.checkbox > input::after, .checkbox > input::before {
position: absolute;
visibility: visible;
content: "";
}
.checkbox > input::after {
width: 40px;
height: 40px;
left: 5px;
top: 5px;
background-color: white;
border-radius: 50%;
transition: all 0.2s;
}
.checkbox > input::before {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: lightgray;
transition: all 0.2s;
}
.checkbox > input:checked::after {
transform: translateX(50px);
}
.checkbox > input:checked::before {
background-color: pink;
}
新建index.md,内部包含tsx代码块。
import React from 'react';
import {
Component} from "react";
import {
Radio } from 'untitled';
export default class extends Component {
state = {
v1: false,
v2: true,
v3: false,
v4: true
}
render() {
return (
<div>
<Radio data={
this.state.v1} toggle={
e => this.setState({
v1: !this.state.v1})}/>
<Radio data={
this.state.v2} toggle={
e => this.setState({
v2: !this.state.v2})}/>
<Radio data={
this.state.v3} toggle={
e => this.setState({
v3: !this.state.v3})}/>
<Radio data={
this.state.v4} toggle={
e => this.setState({
v4: !this.state.v4})}/>
</div>
);
}
}
效果:
舒适。