Onsen UI 정보

공식 페이지

아래 공식 사이트에서 발췌

모바일 앱 개발에 특화된 UI 구성 요소 모음

네이티브 iOS 및 안드로이드 디자인 가이드를 준수하는 디자인과 기능을 가지고

무료로 사용할 수 있으며 완전히 오픈 소스 소프트웨어

Onsen UI가 흡수하는 각 OS의 UI 차이

예를 들어, 안드로이드에서는 탭이 UI에서는 위에 있는 것이 표준이 되고, iOS에서는 탭이 UI에서는 아래에 있는 것이 표준이 되고 있습니다.
Onsen UI에서는 이 두 가지 UI를 동일한 소스 코드로 구현할 수 있습니다.

그 외에도 새 화면이 UI에 겹치는 경우 iOS의 기본값은 오른쪽에서 슬라이드합니다. 안드로이드에서는 아래에서 페이드하면서 겹쳐집니다. 이러한 세세한 인터랙션의 표현도 Onsen UI에서는 자동으로 흡수해줍니다.

UserAgent에서 CSS와 JS를 전환하고 있으므로 Chrome의 개발자 도구에서도 UserAgento를 자르는 것만으로 UI 표현이 변경되는지 확인할 수 있습니다.

React.js 및 Onsen UI

Onsen UI가 2.0이 되어 React JS와 함께 사용할 수 있습니다.
※Onsen UI1.0은 Angular JS 1.*계만 서포트

$ npm install -g create-react-app
$ npx create-react-app my-app
$ cd my-app
$ yarn add onsenui react-onsenui --save-dev
$ yarn start

src/App.js

import logo from './logo.svg';
import './App.css';


// ボタンコンポーネントのインポート
import { Button } from 'react-onsenui';
// Onsen UIのCSSのロード
import "onsenui/css/onsen-css-components.css"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Button modifier="outline">
          button
        </Button>
      </header>
    </div>
  );
}

export default App;

다음과 같이 평소 React의 기본 페이지에 Onsen UI 버튼이 추가됩니다.

Onsen UI를 이용한 네비게이션

Onsen UI를 사용하여 페이지 전환을 구현합니다.
Navigation이라는 구성 요소를 사용합니다.

src/App.js

import logo from './logo.svg';
import './App.css';

// ボタンコンポーネントのインポート
import { Button } from 'react-onsenui';
// Onsen UIのCSSのロード
import "onsenui/css/onsen-css-components.css"

import Block from './components/block'

function App() {
  return (
    <div key="App" className="App">
      <header className="App-header">
        <Block />
      </header>
    </div>
  );
}

export default App;

src/components/block.js

import React from 'react';
import {Navigator, Page, Button, Toolbar, BackButton} from 'react-onsenui';
import "onsenui/css/onsen-css-components.css"

class MainPage extends React.Component {
  pushPage() {
    this.props.navigator.pushPage({component: SecondPage});
  }

  render() {
    return (
      <Page key="page1">
        <Toolbar>
          <div className="center">Navigator</div>
        </Toolbar>

        <p style={{textAlign: 'center'}}>
          <Button onClick={this.pushPage.bind(this)}>Push page</Button>
        </p>
      </Page>
    );
  }
}

class SecondPage extends React.Component {
  pushPage() {
    this.props.navigator.pushPage({component: SecondPage});
  }

  popPage() {
    this.props.navigator.popPage();
  }

  render() {
    return (
      <Page key="page2">
        <Toolbar>
          <div key="div1" className="left"><BackButton>Back</BackButton></div>
          <div key="div2" className="center">Another page</div>
        </Toolbar>

        <p style={{textAlign: 'center'}}>
          <Button key="button2" onClick={this.popPage.bind(this)}>Pop page</Button>
        </p>
      </Page>
    );
  }
}

class Block extends React.Component {
  renderPage(route, navigator) {
    const props = route.props || {};
    props.navigator = navigator;
    props.key = route.component.name;

    return React.createElement(route.component, props);
  }

  render() {
    return (
      <Navigator
        key="nav1"
        initialRoute={{component: MainPage}}
        renderPage={this.renderPage}
      />
    );
  }
}

export default Block;

각 OS에서 UI의 차이

아래와 같이 Navigation에서는 OS에서 UI가 다릅니다.

Android에서의 외형


iOS에서의 외형