Onsen UI

The most beautiful and efficient way to develop HTML5 hybrid and mobile web apps.

Onsen UI 홈페이지

Install

npm install onsenui react-onsenui --save

import

//App.js
// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

Component별 예시

Button과 Action Sheet

App.js

import OnsenUIExample from "./components/OnsenUI/OnsenUIExample";
import "onsenui/css/onsenui.css";
import "onsenui/css/onsen-css-components.css";

export default function App() {
  return (
    <>
      <OnsenUIExample />;
    </>
  );
}

components/OnsenUI/OnsenUIExample.jsx

import React from "react";
import ButtonExample from "./ButtonExample";
import { Page } from "react-onsenui";
import ActionSheetExample from "./ActionSheetExample";

const OnsenUIExample = () => {
  return (
    <Page>
      <ActionSheetExample />
      <ButtonExample />
    </Page>
  );
};

export default OnsenUIExample;

components/OnsenUI/ButtonExample.jsx

import React from "react";
import { Button } from "react-onsenui";

export default function ButtonExample() {
  const handleClick = () => {
    alert("pressed");
  };
  return (
    <>
      <Button onClick={handleClick} modifier="large--cta">
        Tap Me
      </Button>
      <Button onClick={handleClick} disabled="true">
        disabled
      </Button>
      <Button onClick={handleClick} modifier="outline">
        outline
      </Button>
      <Button onClick={handleClick} modifier="light">
        light
      </Button>
      <Button onClick={handleClick} modifier="quiet">
        quiet
      </Button>
      <Button onClick={handleClick} modifier="cta">
        cta
      </Button>
      <Button onClick={handleClick} modifier="large-quiet">
        large-quiet
      </Button>
      <Button onClick={handleClick} modifier="material">
        material
      </Button>
      <Button onClick={handleClick} modifier="material--flat">
        flat
      </Button>
    </>
  );
}

components/OnsenUI/ActionSheetExample.jsx

import React, { useState } from "react";
import { ActionSheet, Button, ActionSheetButton } from "react-onsenui";

export default function ActionSheetExample() {
  const handleClick = () => {
    setOpen(true);
  };
  const handleCancle = () => {
    setOpen(false);
  };
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={handleClick}>Action</Button>
      <ActionSheet isOpen={open} title="action sheet">
        <ActionSheetButton>Label 1</ActionSheetButton>
        <ActionSheetButton>Label 2</ActionSheetButton>
        <ActionSheetButton>Label 3</ActionSheetButton>
        <ActionSheetButton modifier="destructive" onClick={handleCancle}>
          Cancel
        </ActionSheetButton>
        <ActionSheetButton>Save</ActionSheetButton>
      </ActionSheet>
    </>
  );
}

Checkbox

components/OnsenUI/OnsenUIExample.jsx

import React from "react";
import ButtonExample from "./ButtonExample";
import { Page } from "react-onsenui";
import ActionSheetExample from "./ActionSheetExample";
import CheckBoxExample from "./CheckBoxExample";

const OnsenUIExample = () => {
  return (
    <Page>
      <CheckBoxExample /> <!-- 추가 -->
      <ActionSheetExample />
      <ButtonExample />
    </Page>
  );
};

export default OnsenUIExample;

`components/OnsenUI/CheckBoxExample.jsx

import React from "react";
import { Checkbox, List, ListItem } from "react-onsenui";

export default function CheckBoxExample() {
  return (
    <List>
      <ListItem tappable>
        <label class="left">
          <Checkbox input-id="check-1"></Checkbox>
        </label>
        <label for="check-1" class="center">
          Apple
        </label>
      </ListItem>
      <ListItem tappable>
        <label class="left">
          <Checkbox input-id="check-2" checked></Checkbox>
        </label>
        <label for="check-2" class="center">
          Banana
        </label>
      </ListItem>
    </List>
  );
}

Fab

components/OnsenUI/OnsenUIExample.jsx

import React from "react";
import ButtonExample from "./ButtonExample";
import { Page } from "react-onsenui";
import ActionSheetExample from "./ActionSheetExample";
import CheckBoxExample from "./CheckBoxExample";
import FabExample from "./FabExample";

const OnsenUIExample = () => {
  return (
    <Page>
      <FabExample /> <!-- 추가 -->
      <CheckBoxExample />
      <ActionSheetExample />
      <ButtonExample />
    </Page>
  );
};

export default OnsenUIExample;

components/OnsenUI/FabExample.jsx

import React from "react";
import { Fab, Icon } from "react-onsenui";

export default function FabExample() {
  return (
    <Fab position="bottom right">
      <Icon icon="md-plus"></Icon>
    </Fab>
  );
}

List

Thumbnails and Titles

components/OnsenUI/OnsenUIExample.jsx

import React from "react";
import ButtonExample from "./ButtonExample";
import { Page } from "react-onsenui";
import ActionSheetExample from "./ActionSheetExample";
import CheckBoxExample from "./CheckBoxExample";
import FabExample from "./FabExample";
import ListExample from "./ListExample";

const OnsenUIExample = () => {
  return (
    <Page>
      <ListExample /> <!-- 추가 -->
      <FabExample />
      <CheckBoxExample />
      <ActionSheetExample />
      <ButtonExample />
    </Page>
  );
};

export default OnsenUIExample;

components/OnsenUI/ListExample.jsx

import React from "react";
import { List, ListItem, ListHeader } from "react-onsenui";

export default function ListExample() {
  return (
    <List>
      <ListHeader>Thumbnails and titles</ListHeader>
      <ListItem>
        <div className="left">
          <img
            className="list-item__thumbnail"
            src="https://placekitten.com/g/40/40"
          />
        </div>
        <div className="center">
          <span className="list-item__title">Cutest kitty</span>
          <span className="list-item__subtitle">On the Internet</span>
        </div>
      </ListItem>
    </List>
  );
}

List map처럼 생성

import React from "react";
import { List, ListItem, ListHeader, Button } from "react-onsenui";

export default function ListExample() {
  
return (
        <List
        dataSource={["Row 1", "Row 2", "hyunwoo"]}
        renderHeader={() => <ListHeader>Thumbnails and titles</ListHeader>}
        renderRow={(row, idx) => (
          <ListItem>
            {row}
            <Button modifier="quiet">Remove</Button>
          </ListItem>
        )}
      />
)

Progress bar

components/OnsenUI/OnsenUIExample.jsx

import React from "react";
import ButtonExample from "./ButtonExample";
import { Page } from "react-onsenui";
import ActionSheetExample from "./ActionSheetExample";
import CheckBoxExample from "./CheckBoxExample";
import FabExample from "./FabExample";
import ListExample from "./ListExample";
import ProgressBarExample from "./ProgressBarExample";

const OnsenUIExample = () => {
  return (
    <Page>
      <ProgressBarExample /> <!-- 추가 -->
      <ListExample />
      <FabExample />
      <CheckBoxExample />
      <ActionSheetExample />
      <ButtonExample />
    </Page>
  );
};

export default OnsenUIExample;

components/OnsenUI/ProgressBarExample.jsx

import React from "react";
import { ProgressBar, ProgressCircular } from "react-onsenui";

export default function ProgressBarExample() {
  return (
    <div>
      <ProgressCircular indeterminate></ProgressCircular>
      <ProgressBar indeterminate></ProgressBar>
    </div>
  );
}

Tab & Toast

components/OnsenUI/TabExample.jsx

import React, { useState } from "react";
import { Tabbar, TabPage, Page, Tab, Button, Toast } from "react-onsenui";

export default function TabExample() {
  const [index, setIndex] = useState(0);
  const [open, setOpen] = useState(false);
  return (
    <Page>
      <Tabbar
        onPreChange={({ index }) => setIndex(index)}
        onPostChange={() => console.log("postChange")}
        onReactive={() => console.log("postChange")}
        position="bottom"
        index={index}
        renderTabs={(activeIndex, tabbar) => [
          {
            content: (
              <Page title="Home" active={activeIndex === 0} tabbar={tabbar}>
                <div
                  style={{
                    fontSize: 20,
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    padding: "1rem",
                    background: "tomato",
                    color: "white",
                    transform: "transition(-50%,-50%)"
                  }}
                >
                  1페이지
                </div>
                <Button onClick={() => setOpen(true)}>open</Button>
                <Toast isOpen={open}>hi</Toast>
              </Page>
            ),
            tab: <Tab label="Home" icon="md-home" />
          },
          {
            content: (
              <Page title="Settings" active={activeIndex === 1} tabbar={tabbar}>
                <div
                  style={{
                    fontSize: 20,
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    padding: "1rem",
                    background: "tomato",
                    color: "white",
                    transform: "transition(-50%,-50%)"
                  }}
                >
                  2페이지
                </div>
              </Page>
            ),
            tab: <Tab label="Settings" icon="md-settings" />
          }
        ]}
      />
    </Page>
  );
}

Alert Dialog

components/OnsenUI/AlertExample.jsx

import React, { useState } from "react";
import { AlertDialog, Button } from "react-onsenui";

export default function AlertExample() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open</Button>
      <AlertDialog isOpen={isOpen} onCancel={() => setIsOpen(false)} cancelable>
        <div className="alert-dialog-title">Warining</div>
        <div className="alert-dialog-content">Error</div>
        <div className="alert-dialog-footer">
          <Button
            className="alert-dialog-button"
            onClick={() => setIsOpen(false)}
          >
            Cancel
          </Button>
          <Button
            className="alert-dialog-button"
            onClick={() => setIsOpen(false)}
          >
            Ok
          </Button>
        </div>
      </AlertDialog>
    </div>
  );
}

code sandbox (전체 코드)

요약

• 다양한 컴포넌트 => 모바일 케이스 대응
• 문서 최신화 => 잘 안되는 듯 (React에 불친절)