React-List-UI
React-List-UI 는 빅스크린에서 키보드 입력을 통해 List UI를 선택적으로 동작할 수 있는 컴포넌트 입니다.
Type A
Type B
smoothScroll=true
focusOn=true && smoothScroll=true
overScroll=true
overScroll=false
How to Use
-
설치 방법
$ npm install react-list-ui --save -
사용 방법
;;const App = {return<div className='App'><ListUI /></div>;};;
DEMO
다양한 props를 직접 넣으면서 Test해보세요
Props
Props | Description | Type | Default | Example |
---|---|---|---|---|
type |
[필수] List의 A,B타입을 선택합니다. | [ 'A' , 'B' ] | type={ 'B' } | |
공통 | type에 관계 없이 사용 가능한 props입니다 | |||
itemList |
List 내부에 들어갈 item들을 입력합니다. 각 Object의 key:value는 자동으로 itemComponent의 props로 전달 됩니다. |
arrayOf(Object)) | [] | itemList={[{ title: 'first', content : 'first item' }, { title : 'second', content : 'second item' }]} |
itemComponent |
List 내부 item의 React Element를 전달합니다. | React.Element | <DefaultItemComponent /> |
itemComponent={<YourCustomComponent /> } |
clickDisable |
마우스 클릭을 통한 선택 영역 이동 허용 여부를 결정합니다. | bool | false | clickDisable={ true } |
smoothScroll |
부드러운 스크롤 이동 여부를 결정합니다. | bool | true | smoothScroll={ false } |
overScroll |
범위를 벗어나는 스크롤일 경우, 처음으로 돌아갈지 여부를 결정합니다. False로 설정할 경우, 스크롤 영역이 흔들려 endPoint임을 알려줍니다. |
bool | false | overScroll={ true } |
focusOn |
선택 영역을 배경색 대신 확대 여부로 강조할 지 결정합니다. | bool | false | focusOn={ true } |
showResetButton |
Reset Button 표시 여부를 결정합니다. | bool | false | showResetButton={ true } |
Type A | props.type === 'A' 의 경우 사용 가능한 props들입니다. | |||
itemStyle |
Carousel 내부의 item들의 사이즈를 지정합니다. Height와 Width를 지정할 수 있습니다. |
Object({ height: string, width: string }) | {{ height: '18rem', width: '18rem' }} | itemStyle={{ height: '300px', width: '300px' }} |
Type B | props.type === 'B' 의 경우 사용 가능한 props들입니다. | |||
itemStyle |
List 내부의 item들의 사이즈를 지정합니다. Height를 지정할 수 있습니다. |
Object({ height: string }) | {{ height: '18rem' }} | itemStyle={{ height: '300px' }} |
col |
List column의 item 개수를 지정합니다. | number | 4 | col={ 5 } |
Css Customizing props
CSS를 Customizing하기 위한 Props들 입니다.
Props | Description | type |
---|---|---|
containerCssObject |
container Css를 변경합니다. | Object |
listCssObject |
list Css를 변경합니다. | Object |
itemCssObject |
item Css를 변경합니다. | Object |
selectingAreaCssObject |
selectingArea Css를 변경합니다. | Object |
headerCssObject |
header Css를 변경합니다. | Object |
resetButtonCssObject |
resetButton Css를 변경합니다. | Object |
// CSS customizing props example<ListUI containerCssObject= backgroundColor: 'red' />
Customizing한 ClassName을 추가할 수 있습니다.
Props | Description | type |
---|---|---|
containerClassName |
container에 ClassName을 추가합니다. | String |
listClassName |
list에 ClassName을 추가합니다. | String |
itemClassName |
item에 ClassName을 추가합니다. | String |
selectingAreaClassName |
selectingArea에 ClassName을 추가합니다. | String |
headerClassName |
header에 ClassName을 추가합니다. | String |
resetButtonClassName |
resetButton에 ClassName을 추가합니다. | String |
이 Component는 styled-component를 사용하고 있습니다. className을 이용하여 styled-component보다 우선해 적용하고 싶다면 아래와 같이 사용하세요.
// Add class props example // app.js<ListUI containerClassName='customClassName' /> // app.csscustomClassNamecustomClassName background-color: red;