読者です 読者をやめる 読者になる 読者になる

onsenuiのcssだけ使いたいときに便利な方法(htmlでアプリ風デザインをつくる)

最近htmlアプリでネイティブっぽい見た目を提供してくれるonsenuiを調べてます。
jsでネイティブアプリぽい動作も提供してくれてますが、とりあえずcssで見た目だけ使いたいってときにも使えそうです。

cssコンポーネント一覧

まずはCSSコンポーネント一覧
一目瞭然ですがアプリ風の部品を色々提供してくれています

1. こんなかんじの部品を使ってみたいとして
f:id:yoppy0066:20141210090316p:plain

2. クリックするとこんなかんじでhtmlとcssのソースが表示されるのでコピペすればそのまま使えますね
f:id:yoppy0066:20141210090607p:plain

」ちなみにonsenui.cssの本体を予め読み込んでおけばhtml部分だけかけばokです

画面パターン

こちらです。
画面単位でありがちなページを用意してくれています。僕はリストページとかログインフォームとかけっこう使わせてもらってます
f:id:yoppy0066:20141210091138p:plain

これも基本コピペでページ丸ごと使えます

が、最近まで知らなかったのですがこのページの画面右上に「Find Component」というリンクがあるのですがこれが非常に便利!
これおすとこんな感じでこのページのある部品のhtml+cssを見る事ができるんです
f:id:yoppy0066:20141210091725p:plain

さいごのは地味に便利な機能なのにちょっときづきずらかったので、しらなかった人はぜひつかってみてください