1.0.7 • Published 5 years ago
react-simple-splitter v1.0.7
react-simple-splitter
simple and basic splitter for react
- It can adjust size in vertical area and horizontal.
- 가로 분할 혹은 세로 분할해서 각 영역으로 사이즈로 드래그로 조절할 수 있습니다.
- This library use 'display: table' so IE9 is ok
- 익스9까지 지원할 수 있도록 display: table을 이용하여서 제작했습니다
Install
npm i react-simple-splitter
Usage
import React from 'react'
import Splitter from 'react-simple-splitter'
const Example = () => {
const option1 = {
mode: 'h',
minSize: 50,
oneSize: 100,
}
const option2 = {
mode: 'w',
minSize: 100,
oneSize: 150,
}
return (
<section className="foo">
<Splitter option={option1}>
<div>
This is a Top Component
</div>
<div>
This is a Bottom Component
</div>
</Splitter>
</section>
<section className="foo">
<Splitter option={option2}>
<LeftComponent /> {/* user's component */}
<RightComponent /> {/* user's component */}
</Splitter>
</section>
)
}
- Splitter Component should have only 2 children component
- create object option and Inject in Splitter component.
- option
- mode: "h" is horizontal. "v" is vertical
- minSize - it can adjust minimum size
- oneSize: initial size for first area. It's left area in h mode and It's top area in v mode.
사용법
- Splitter 내부에 자식 컴포넌트는 2개만 있어야 합니다.
- option 객체를 생성해서 Splitter component에 대입해서 사용합니다.
- option
- mode: "h" 는 가로모드. "v" 는 세로모드입니다.
- minSize - 드래그시 줄어들수 있는 최소사이즈 입니다.
- oneSize: 첫번째 영역의 초기 크기입니다. h mode 일때는 왼쪽 v mode 일때는 상단 영역이 첫번째 영역입니다.
License
MIT © ds2lvg
제작자: 김종민