鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

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を指定するだけ。

f:id:labduck:20150221223236p:plain

それっぽいのがこんなに簡単に!

アイコンと同じ容量でボタンを置けたりもします。

タブバー

画面下のタブバーも簡単に作れます。

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>

こんな感じに。タブバーは前にきて、コンテンツは後ろに回ってくれます。

f:id:labduck:20150221224113p:plain

が、コンテンツの一番下がタブバーに隠れて見えなくなってしまうので、そこは調整が必要です。

コンテンツ関連

'>'付きテーブルビュー

'>'が右側についている、見覚えのあるテーブルビューも簡単に作れます。

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>

こんな感じです。これまた簡単。

f:id:labduck:20150221225227p:plain

>の代わりにいわゆるバッジやボタン、トグルスイッチを置くこともできます。

ボタン関連

普通のボタン

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>

たくさん。

f:id:labduck:20150221225852p:plain

幅いっぱいのボタン

ボタンの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>

このとおり。

f:id:labduck:20150221230700p:plain

フォーム

普通のフォーム

フォームは何も考えなくともいい感じに使えます。

<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>

こうなります。

f:id:labduck:20150221231355p:plain

スマホっぽいフォーム

いかにもスマホっぽいフォームも作ることができます。

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>

こんないかにもな感じになります。

f:id:labduck:20150221231852p:plain

他にも色々とあるので、Components · Ratchetから見てみるとよいでしょう。本当に簡単便利ですね。

次回は画面遷移を伴うもの(push.jsを使うもの)を試してみます。