React + OnsenUI for React의 기본 컴포넌트① (Page・Button편)
개요
Component
우선, 이번에 작성한 소스입니다.
src/button.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Page, Button } from 'react-onsenui';
export default class TodosApp extends React.Component {
render() {
return (
<Page>
<Button
modifier="material"
>
Tap Me!
</Button>
</Page>
);
}
}
Page Component
OnsenUI 1.x의 에 해당하는 구성 요소입니다.
, , 등의 화면의 구성을 실시하는 컴퍼넌트의 아이 컴퍼넌트로서 존재합니다.
Page 컴포넌트 내에서 를 사용하려면,
Page 구성 요소의 props로 renderToolbar(fn)를 나열합니다.
(모달 버전의 renderModal(fn)도 존재합니다.)
page.jsx...
render() {
return (
<Page
renderToolbar={() =>
<Toolbar>
<div>Title</div>
</Toolbar>
}
>
</Page>
);
}
...
Props
PageComponent는 이벤트 드리븐으로 페이지 변경에 따라 이벤트를 취할 수 있습니다.
이벤트 설명도 Page 구성 요소의 props에 나열됩니다.
Props
Description
modifier
Props 값을 변경하여 외형을 변경합니다.
renderToolbar={fn}
Page에 Toolbar를 render한다.
renderModal={fn}
Page에 Modal를 render한다.
onInit={fn}
Page가 DOM에 생성된 후 한 번만 발화.
onShow={fn}
페이지가 화면에 나타난 후 발화.
onHide={fn}
페이지가 화면에서 사라진 후 발화.
각 Component에는 [modifier]라는 props가 있습니다.
modifier를 변경하면 OnsenUI에 preset으로 들어있는 스타일 등이 반영됩니다.
대부분의 modifier는 Optional입니다만, 잘 쓰면 iOS와 Android의 전환 등,
이미지대로 UI를 바로 만들 수 있습니다.
수정자
수정자
Description
material
머티리얼 디자인 스타일로 페이지 변경
Button Component
다음은 Button 구성 요소입니다.
OnsenUI 1.x의 에 해당하는 Component입니다.
Props
Props
Description
modifier
Props 값을 변경하여 외형을 변경합니다.
disabled
Disabled 상태로 변경합니다.
ripple
waveEffect를 곱한다.
onClick={fn}
클릭하면 콜백을 실행합니다.
수정자
modifier를 변경하는 것으로, 다양한 버튼을 표현하는 것이 가능합니다.
수정자
Description
outline
외부 선만 배경이 투명한 버튼
빛
눈에 띄지 않는 버튼
quiet
외부 선이 없고 배경도 투명한 버튼
cta
눈에 띄는 버튼 (명도가 높아집니다)
큰
큰 버튼
large--quiet
크고, 외선도 없고, 배경도 투명한 버튼
large--cta
크고 눈에 띄는 버튼
material
머티리얼 디자인 버튼
material--flat
외부 선이 없고 배경도 투명한 머티리얼 디자인 버튼
끝
ReactNative에 감도가 있었습니다만, 좀 더 사양이 굳어지고 나서 하려고 하고,
OnsenUI 2.x에 먼저 걸었습니다.
Angular 기반의 OnsenUI 1.x에서 앱 개발을 경험한 사람이라면,
OnsenUI 2.x 자체에는 원활하게 들어가는 것이 가능하다고 생각합니다.
계속은 다음 번.
-P.S.-
OnsenUI의 Onsen의 기원은
【Onsen -> SPA(스파) -> Single Page Application】
에서 온 것 같습니다.
꽤 뾰족한 상태로 재미 있습니다.
링크
【본가】Onsen UI for React 【본가】 PageComponent 【본가】ButtonComponent
Reference
이 문제에 관하여(React + OnsenUI for React의 기본 컴포넌트① (Page・Button편)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tfrcm/items/31c8da84a1cd17a5cb9f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from 'react';
import ReactDOM from 'react-dom';
import { Page, Button } from 'react-onsenui';
export default class TodosApp extends React.Component {
render() {
return (
<Page>
<Button
modifier="material"
>
Tap Me!
</Button>
</Page>
);
}
}
Page 컴포넌트 내에서
Page 구성 요소의 props로 renderToolbar(fn)를 나열합니다.
(모달 버전의 renderModal(fn)도 존재합니다.)
page.jsx
...
render() {
return (
<Page
renderToolbar={() =>
<Toolbar>
<div>Title</div>
</Toolbar>
}
>
</Page>
);
}
...
Props
PageComponent는 이벤트 드리븐으로 페이지 변경에 따라 이벤트를 취할 수 있습니다.
이벤트 설명도 Page 구성 요소의 props에 나열됩니다.
Props
Description
modifier
Props 값을 변경하여 외형을 변경합니다.
renderToolbar={fn}
Page에 Toolbar를 render한다.
renderModal={fn}
Page에 Modal를 render한다.
onInit={fn}
Page가 DOM에 생성된 후 한 번만 발화.
onShow={fn}
페이지가 화면에 나타난 후 발화.
onHide={fn}
페이지가 화면에서 사라진 후 발화.
각 Component에는 [modifier]라는 props가 있습니다.
modifier를 변경하면 OnsenUI에 preset으로 들어있는 스타일 등이 반영됩니다.
대부분의 modifier는 Optional입니다만, 잘 쓰면 iOS와 Android의 전환 등,
이미지대로 UI를 바로 만들 수 있습니다.
수정자
수정자
Description
material
머티리얼 디자인 스타일로 페이지 변경
Button Component
다음은 Button 구성 요소입니다.
OnsenUI 1.x의
Props
Props
Description
modifier
Props 값을 변경하여 외형을 변경합니다.
disabled
Disabled 상태로 변경합니다.
ripple
waveEffect를 곱한다.
onClick={fn}
클릭하면 콜백을 실행합니다.
수정자
modifier를 변경하는 것으로, 다양한 버튼을 표현하는 것이 가능합니다.
수정자
Description
outline
외부 선만 배경이 투명한 버튼
빛
눈에 띄지 않는 버튼
quiet
외부 선이 없고 배경도 투명한 버튼
cta
눈에 띄는 버튼 (명도가 높아집니다)
큰
큰 버튼
large--quiet
크고, 외선도 없고, 배경도 투명한 버튼
large--cta
크고 눈에 띄는 버튼
material
머티리얼 디자인 버튼
material--flat
외부 선이 없고 배경도 투명한 머티리얼 디자인 버튼
끝
ReactNative에 감도가 있었습니다만, 좀 더 사양이 굳어지고 나서 하려고 하고,
OnsenUI 2.x에 먼저 걸었습니다.
Angular 기반의 OnsenUI 1.x에서 앱 개발을 경험한 사람이라면,
OnsenUI 2.x 자체에는 원활하게 들어가는 것이 가능하다고 생각합니다.
계속은 다음 번.
-P.S.-
OnsenUI의 Onsen의 기원은
【Onsen -> SPA(스파) -> Single Page Application】
에서 온 것 같습니다.
꽤 뾰족한 상태로 재미 있습니다.
링크
Reference
이 문제에 관하여(React + OnsenUI for React의 기본 컴포넌트① (Page・Button편)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tfrcm/items/31c8da84a1cd17a5cb9f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
