Rachet試してみた(2) 各種部品を使ってみる
Rachetにはモバイルっぽくみえる部品があるので、それをいくつか試してみました。
部品はComponents · Ratchetから確認できます。
使い方はBootstrapと同様、特定のclassを使うだけと簡単です。
ヘッダ関連
いかにもそれっぽいアイコンを使う
<header class="bar bar-nav"> <a class="icon icon-left-nav pull-left"></a> <a class="icon icon-compose pull-right"></a> <h1 class="title">Ratchetテスト</h1> </header>
a要素のclassにicon
と使いたいアイコンの種類(Ratchiconにあります)を指定して、さらに左に置きたいならpull-left
、右ならpull-right
を指定するだけ。
それっぽいのがこんなに簡単に!
アイコンと同じ容量でボタンを置けたりもします。
タブバー
画面下のタブバーも簡単に作れます。
classにbar
をつけるだけでバーが作れるのですが、さらにbar-tab
を追加するとタブバーになります。
タブバーの各アイテムはa要素にして、classをtab-item
としてあげます。配下にはspanでアイコンをおくとともに、アイコンラベルもspanでつけることができます。classはtab-label
です。
<nav class="bar bar-tab"> <a class="tab-item active" href="#"> <span class="icon icon-home"></span> <span class="tab-label">Home</span> </a> <a class="tab-item" href="#"> <span class="icon icon-person"></span> <span class="tab-label">Profile</span> </a> <a class="tab-item" href="#"> <span class="icon icon-star-filled"></span> <span class="tab-label">Favorites</span> </a> <a class="tab-item" href="#"> <span class="icon icon-search"></span> <span class="tab-label">Search</span> </a> <a class="tab-item" href="#"> <span class="icon icon-gear"></span> <span class="tab-label">Settings</span> </a> </nav>
こんな感じに。タブバーは前にきて、コンテンツは後ろに回ってくれます。
が、コンテンツの一番下がタブバーに隠れて見えなくなってしまうので、そこは調整が必要です。
コンテンツ関連
'>'付きテーブルビュー
'>'が右側についている、見覚えのあるテーブルビューも簡単に作れます。
ulのclassをtable-view
にして、liのclassをtable-view-cell
にすればテーブルビューとその中のセルが作れます。
右側の'>'は、a要素でclassをnavigate-right
にし、アイコンを右寄せしているだけですね。
<ul class="table-view"> <li class="table-view-cell"> <a class="navigate-right"> Item 1 </a> </li> <li class="table-view-cell"> <a class="navigate-right"> Item 2 </a> </li> <li class="table-view-cell"> <a class="navigate-right"> Item 3 </a> </li> </ul>
こんな感じです。これまた簡単。
>
の代わりにいわゆるバッジやボタン、トグルスイッチを置くこともできます。
ボタン関連
普通のボタン
a要素もしくはbutton要素のclassをbtn
にすると、ボタンになります。
後はクラスを追加することで色が変わります。
<button class="btn">Button</button> <button class="btn btn-primary">Button</button> <button class="btn btn-positive">Button</button> <button class="btn btn-negative">Button</button> <button class="btn btn-link">Button</button> <button class="btn btn-outlined">Button</button> <button class="btn btn-primary btn-outlined">Button</button> <button class="btn btn-positive btn-outlined">Button</button> <button class="btn btn-negative btn-outlined">Button</button>
たくさん。
幅いっぱいのボタン
ボタンのclassにbtn-block
を追加してあげると、幅いっぱいのボタンになります。
<button class="btn btn-block">Button</button> <button class="btn btn-block btn-primary">Button</button> <button class="btn btn-block btn-positive">Button</button> <button class="btn btn-block btn-negative">Button</button> <button class="btn btn-block btn-link">Button</button> <button class="btn btn-block btn-outlined">Button</button> <button class="btn btn-block btn-primary btn-outlined">Button</button> <button class="btn btn-block btn-positive btn-outlined">Button</button> <button class="btn btn-block btn-negative btn-outlined">Button</button>
このとおり。
フォーム
普通のフォーム
フォームは何も考えなくともいい感じに使えます。
<form> <input type="text" placeholder="Full name"> <input type="search" placeholder="Search"> <textarea rows="5"></textarea> <button class="btn btn-positive btn-block">Choose existing</button> </form>
こうなります。
スマホっぽいフォーム
いかにもスマホっぽいフォームも作ることができます。
form要素のclassをinput-group
にして、各行をdivで囲み、そのclassをinput-row
にします。その中にlabel要素でラベルを、input要素で入力場所を作ればOKです。
<form class="input-group"> <div class="input-row"> <label>Full name</label> <input type="text" placeholder="Mister Ratchet"> </div> <div class="input-row"> <label>Email</label> <input type="email" placeholder="ratchetframework@gmail.com"> </div> <div class="input-row"> <label>Username</label> <input type="text" placeholder="goRatchet"> </div> </form>
こんないかにもな感じになります。
他にも色々とあるので、Components · Ratchetから見てみるとよいでしょう。本当に簡単便利ですね。
次回は画面遷移を伴うもの(push.jsを使うもの)を試してみます。