Reading of NB [njuː biː] This word means very very crazy,very very amazing and very very admirable
npm i react-nblayout
yarn add react-nblayoutimport { NBLayout,col, row } from 'react-nblayout'const simpleDemo = () => {
return NBLayout(
[
row([<Ele/>,<Ele/>,<Ele/>,<Ele/>,<Ele/>]),
col([
<Ele/>,
<Ele/>,
<Ele/>,
<Ele/>,
row([<Ele/>,<Ele/>,<Ele/>,col([
<Ele/>,
<Ele/>,
])
])
])
]
)
}
const Demo = () => {
return NBLayout(
[
row([<Div />, <Div />, <Div />, <Div />, <Div />, <Div />, <Div />, <Div />, <Div />]),
row([
col([<Div />, <Div />,]),
col([<Div />, <Div />,]),
]),
col([
<Div />,
row([<Div />, <Div />],{background:"#122b2182"},{background:"#514663",color:"white",flexGrow:0}),
row([<Div />, <Div />, <Div />],{},{flexGrow:0}),
row([<Div />, <Div />, <Div />, <Div />]),
row([<Div />, <Div />, <Div />, <Div />,<Div />])
],{background:"black",fontSize:"20px",color:"white"}),
],
{height:"100vh",background:"white"},
)
}
const boxStyle:React.CSSProperties = {
position:"relative",
}
const itemStyle:React.CSSProperties={
marginBottom:"2vh",
background:"white"
}
const mockData = ["nb1","nb2","nb3","nb4","nb5"]
const Demo = () => {
return NBLayout(
[
row([
col(mockData.map(item => <Div>{item}</Div>),{...boxStyle,top:"2vh"},{...itemStyle}),
col(mockData.map(item => <Div>{item}</Div>),{...boxStyle,top:"6vh"},{...itemStyle}),
col(mockData.map(item => <Div>{item}</Div>),{...boxStyle,top:"10vh"},{...itemStyle}),
col(mockData.map(item => <Div>{item}</Div>),{...boxStyle,top:"14vh"},{...itemStyle}),
col(mockData.map(item => <Div>{item}</Div>),{...boxStyle,top:"18vh"},{...itemStyle})
])
//NBlayout||row||col 接受到的组件数组渲染时会自动填充key 所以不用传key
/*
NBlayout||row||col The component array received by col will
be automatically filled with keys when rendering,
so no key needs to be passed
*/
],
{height:"100vh",background:"black"},"myclass"
)
}
NBLayout(NBarr: JSX.Element[], style?: React.CSSProperties | undefined,className?:string): JSX.Element
接收3个参数 第2,第3个为可选值
第一个参数是组件列表 只有一层 虽然看上去是多维数组 其实row col两个函数最终返回都都是单个组件
也就是说
NBlayout([...arr]) || row([...arr]) || col([...arr]) 返回值都是一个React组件Receive the second of three parameters, and the third is an optional value
The first parameter is that the component list has only one layer.
Although it looks like a multi-dimensional array,
in fact, both row col functions ultimately return a single component
in other words
NBlayout([...arr]) || row([...arr]) || col([...arr]) = <ReactComponent/> 这样的设计实际上只是编写代码上有一定的可视化功能 使布局更为直观 方便调整
第二个参数是 整个NbLayout 容器的样式 按照React.CSSProperties 类型提示去写即可
In fact, such design is just to write code,
which has certain visualization functions to make the layout more intuitive and convenient to adjust
The second parameter is to write the style of the entire NbLayout container according to the React.CSSProperties type prompt
需要注意的是 NBlayout row col 接受到的组件数组会自动填充key 所以无论是一个个写 还是使用arr.map 都无需手写key=...
It should be noted that the component array received by NBlayout row col will automatically fill in keys, so whether you write one by one or use arr.map, you do not need to write keys=
第三个参数为替换自定义类名 方便自定义样式 和容器内的row col 隔离其他nblayout
The third parameter is to replace the custom class name to facilitate custom style and row col in the container to isolate other nblayouts
row(arr: JSX.Element[], style?: React.CSSProperties | undefined, itemstyle?: React.CSSProperties | undefined): JSX.Element
col(arr: JSX.Element[], style?: React.CSSProperties | undefined, itemstyle?: React.CSSProperties | undefined): JSX.Element接收3个参数 前2个 与NBlayout相同 第三个参数为row|col 内的子组件样式
调用row会将 组件列表用样式类.nb-row的div包括起来
具体样式如下
The first two parameters are the same as NBlayout.
The third parameter is the sub component style in row | col
Calling row will include the component list with the div of the style class. nb row
The specific style is as follows
.nb-row {
width: 100%;
display: flex ;
align-items: center;
justify-content: center;
flex-grow: 1;
flex-wrap: wrap;
}调用col会将 组件列表用样式类.nb-col的div包括起来
具体样式如下
Calling col will include the component list with the div of the style class. nb col
The specific style is as follows
.nb-col{
max-width: 100%;
display: flex ;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
flex-wrap: wrap;
}如果自定义的组件不希望自动增长 可参照demo中的写法 或者直接在css中增加flex-grow:0;
If you do not want the customized components to grow automatically,
you can refer to the writing method in the demo or directly add flex grow: 0 in the css;
row([<Div />, <Div />, <Div />],{},{flexGrow:0}),如果通过NBlayout组装使用 可使用以下方式的css选择器 修改row 以及col 的基础样式规则 如果是单独使用 col 或者 row 请找一个最近的父结点类名或id替换 .nb-root 如果NBlayout调用时接收了第三个参数 将.nb-root 替换为你自定义的类名
If used by NBlayout assembly The basic style rules of row and col can be modified using the css selector in the following ways If col or row is used alone, please find the nearest parent node class name or id to replace. nb root If NBlayout receives the third parameter when calling, replace. nb root with your customized class name
.nb-root .nb-row{
}
.nb-root .nb-col{
}
.myclass .nb-row{
}
.myclass .nb-col{
}如果自定义组件使用第三个参数item样式后未生效 请注意是否接收style属性 并赋值给组件内的div 可参考demo中的Div组件
If the custom component does not take effect after using the third parameter item style, please note whether to receive the style attribute and assign it to the div in the component Refer to the Div component in the demo
interface NbDiv{
style?: React.CSSProperties,
children?: ReactNode
}
export const Div: React.FC<NbDiv> = ({ style, children }) => {
return (
<div style={style}> //自定义组件时 请接收style参数并赋值 style会被 Nblayout 自动传入
/**
//When customizing components, please receive the style parameter and assign a value. The style will be automatically imported by Nblayout
*/
{children}
</div>
)
}