はじめに

今回は以前紹介させていただいた、UIkit3の使い方の続きで、個人的によく使うコンポーネントとそのサンプルをご紹介いたします。
UIkit3のインストールについてはUIkit3の使い方をご確認頂くか、公式のドキュメントをご確認ください。

サンプル

サンプルページ

以降はサンプルページを参照しながらご確認ください。
今回のサンプルでは、フォントのスタイルを除いてCSSは一切記述していません。
全てUIkit3によるスタイルとなっています。

カバーコンポーネント

画像や動画のアスペクト比を維持するように、canvasによってメディアがトリミングされます。様々なコンポーネントとの併用も可能で、レスポンシブデザインではお世話になるコンポーネントの1つです。
canvasにwidthとheight属性を指定することでその比率でトリミングしてくれます。今回480を当てていますが、この数字は小さくてもかまいません。
例えば2:1の比率で画像をトリムしたい場合はwidth=”200″,height=”100″と小さな値を指定しても大丈夫です。

構成

.uk-cover-containerクラスでimgタグとcanvasタグをラップします。imgタグにはuk-cover属性 をつける必要がありますので、忘れないようにしてください。

<div class="uk-cover-container"><img src="画像へのパス" alt="*" />
<canvas width="横比" height="縦比"></canvas></div>

コードサンプル

実際のカバーコンポーネント サンプル

<!-- 1:1のアスペクト比で画像をトリミング -->
<div class="uk-cover-container">
  <img src="画像へのパス" alt="*" />
  <canvas width="480" height="480"></canvas>
</div>
<!-- 黄金比で画像をトリミング -->
<div class="uk-cover-container">
  <img src="画像へのパス" alt="*" />
  <canvas width="480" height="296"></canvas>
</div>

カードコンポーネント

UIkit3のカードコンポーネントは縦のレイアウトだけでなく、横向きのレイアウトも用意されています。
構成としてヘッダー、画像、ボディ、フッターが用意されていて、必要な要素だけを組み合わせたカードスタイルを作ることができます。

構成

.uk-cardタグでラップし、その中に.uk-card-header(ヘッダー),.uk-card-media-top(メディア),.uk-card-body(ボディ),.uk-card-footer(フッター)を好みで配置します。

<div class="uk-card uk-card-default">
  <!-- ヘッダー -->
  <div class="uk-card-header">タイトルでもメタ情報でも</div>

  <!-- メディア -->
  <div class="uk-card-media-top">
    <div class="uk-cover-container">
      <img src="画像へのパス" alt="*" />
      <canvas></canvas>
    </div>
  </div>

  <!-- ボディ -->
  <div class="uk-card-body">
    <h3 class="uk-card-title">タイトル</h3>
    テキスト
  </div>

  <!-- フッター -->
  <div class="uk-card-footer">
    <a href="#">リンク等</a>
  </div>
</div>

コードサンプル

実際のカードコンポーネント サンプル

<div class="uk-card uk-card-default uk-margin">
  <div class="uk-card-media-top"><img src="画像へのパス" alt="*" /></div>
  <div class="uk-card-body">
    <h3 class="uk-card-title">草枕</h3>
    智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。
  </div>
  <div class="uk-card-footer">
    <a class="uk-text-muted" href="#">READ MORE</a>
  </div>
</div>

タブコンポーネント

タブコンポーネントはPCでの使いやすさはもちろんですが、UIkit3はスマートフォンの場合に自動でスワイプイベントにも対応してくれるため、使いやすいコンポーネントの1つです。
基本的にはスイッチャーコンポーネントとの併用になりますが、タブも横・縦・右・左と好きなレイアウトを実装できます。

構成

UIkit3のタブコンポーネントはSwitcherコンポーネントを利用します。タブ用のulと、それに対応するパネル用のulの二つのulが最小構成となります。タブとなるulにはuk-tab属性を当てることで、隣接したulが自動でパネルとなります。
UIkit3のSwitcherコンポーネントは汎用性があり、テンプレートエンジン的な使い方も可能です。
ulタグに拘束されますが、レイアウトの自由度も高くStickyコンポーネントと並ぶお気に入りコンポーネントです。
どのタブが選択されているかは.uk-activeクラスを付与することでスタイルされます。

<!-- タブ ulで構成 -->
<ul>
  <li style="list-style-type: none">
    <ul>
      <li class="uk-active"><a href="#">ITEM 1</a></li>
      <li><a href="#">ITEM 2</a></li>
    </ul>
  </li>
</ul>

...

<!-- タブに対応するパネル ulで構成 -->
<ul class="uk-switcher">
  <li style="list-style-type: none">
    <ul class="uk-switcher">
      <li>ITEM 1 に対応したパネル</li>
      <li>ITEM 2 に対応したパネル</li>
    </ul>
  </li>
</ul>
...

コードサンプル

実際のタブコンポーネント サンプル

<!-- タブ部分 -->
<ul class="uk-child-width-expand">
  <li class="uk-active"><a href="#">ITEM 1</a></li>
  <li><a href="#">ITEM 2</a></li>
  <li><a href="#">ITEM 3</a></li>
</ul>
<!-- パネル部分 -->
<ul class="uk-switcher uk-margin">
  <li class="uk-section-xsmall uk-background-default">
    <div class="uk-padding">タブパネル 1</div>
  </li>
  <li class="uk-section-xsmall uk-background-default">
    <div class="uk-padding">タブパネル 2</div>
  </li>
  <li class="uk-section-xsmall uk-background-default">
    <div class="uk-padding">タブパネル 3</div>
  </li>
</ul>

テーブルコンポーネント

レスポンシブデザイン必須の時代に、「こうやってTableも対応させたらいいんじゃない？」というアイデアが詰まったUIkit3のテーブルコンポーネントです。
セマンティックな構文が求められるHTMLで、他のタグだと代用ができない場合も多いため、個人的には結構な頻度で使っています

構成&コードサンプル

tableタグに.uk-tableクラスを付与するだけでOKです。ただほとんどスタイルがリセットされた状態ですので、レスポンシブに対応する目的で、個人的には.uk-table-dividerと.uk-table-responsiveの2つのクラスをつけるようにしています。
横に長いデータセットの場合は、tableタグを.uk-over-flowを付与したdivタグでラップすることで、横スクロールが発生するようになり便利です。

実際のテーブルコンポーネント サンプル

<table class="uk-table uk-table-divider uk-table-responsive">
  <thead>
    <tr>
      <th>HEAD1</th>
      <th>HEAD2</th>
      <th>HEAD3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>KEY1</td>
      <td>VALUE</td>
      <td>VALUE</td>
    </tr>
    <tr>
      <td>KEY1</td>
      <td>VALUE</td>
      <td>VALUE</td>
    </tr>
    <tr>
      <td>KEY1</td>
      <td>VALUE</td>
      <td>VALUE</td>
    </tr>
    <tr>
      <td>KEY1</td>
      <td>VALUE</td>
      <td>VALUE</td>
    </tr>
  </tbody>
</table>
<!-- 横スクロールさせたいとき -->
<div class="uk-overflow-auto">...</div>

アコーディオンコンポーネント

一度も使ったことがないので詳しいことは言えませんが、どのフレームワークにも用意されていますね。
UIkit3にももちろん用意されています。ここでは通常のシングルオープンを用意していますが、マルチオープンも用意されているため、ナビゲーションに使うデザインにも相性は良さそうです。

構成

ulタグに uk-accordion属性を付与します。
タイトルとコンテンツは各々liタグの中に次のクラスを付与した要素を追加します。
タイトル .uk-accordion-title
コンテンツ .uk-accordion-content

<ul>
  <li style="list-style-type: none">
  <ul>
    <li>
      <h3 class="uk-accordion-title">タイトル 1</h3>
      <div class="uk-accordion-content">コンテンツ 1</div>
    </li>
  </ul>
  </li>
</ul>
...

コードサンプル

実際のアコーディオンコンポーネント サンプル

<ul>
  <li style="list-style-type: none">
  <ul>
    <li>
      <h3 class="uk-accordion-title">タイトル 1</h3>
      <div class="uk-accordion-content">
        コンテンツ 1 智ちに働けば角かどが立つ。
      </div>
    </li>
    <li>
      <h3 class="uk-accordion-title">タイトル 2</h3>
      <div class="uk-accordion-content">
        コンテンツ 2 智ちに働けば角かどが立つ。
      </div>
    </li>
      <li>
      <h3 class="uk-accordion-title">タイトル 3</h3>
      <div class="uk-accordion-content">
        コンテンツ 3 智ちに働けば角かどが立つ。
      </div>
    </li>
  </ul>
  </li>
</ul>
...

オフカンバスコンポーネント

スマートフォンの普及によって横配置のナビゲーションのデザインが問題になりましたが、それを解決する1つの手段としてオフカンバスによるデザインが広がりました。
UIkit3のオフカンバスはHTMLの構造を簡潔に管理することができ、デザインの拡張性も富んでいます。
個人的な評価としてはFoundation6と並ぶ使いやすさです。

構成

オフカンバスを利用する場合は、すべてのコンテンツを.uk-offcanvas-content でラップする必要があります。

2019.03.13 追記
現在(2019.03.13)、バージョン3.0.3がリリースされています。 ラッパー用のクラス .uk-offcanvas-content は必要ありません。
またトグル用のボタンにはuk-toggle属性が必要です。(バグの可能性)

<!-- <div class="uk-offcanvas-content"> -->
<a href="#offcanvas" uk-toggle="#offcanvas">MENU</a><!-- オフカンバス -->
<div id="offcanvas"><!-- オフカンバスのインナー -->
  <div class="uk-offcanvas-bar"><!-- 閉じるボタン 以下の通りにすると自動でXマークと閉じるボタンが実装される-->
    <button class="uk-offcanvas-close" type="button"></button><!-- ここから下にナビゲーションなどオフカンバスのコンテンツを記述 -->
  </div>
</div>
<!-- </div> -->

コードサンプル

オフカンバスのコンテンツは、ナビゲーション目的で実装されることが多いと思います。ですので、コンテンツの最下部に記述して、メインのコンテンツが早く読み込まれるようにすることをオススメします。

実際のオフカンバスコンポーネント サンプル

2019.03.13 追記
コード修正しました。

<!-- オフカンバスのトグルボタン -->
<a href="#offcanvas" uk-toggle="#offcanvas">MENU</a></header><!-- メイン -->

メインコンテンツ

<!-- フッター -->
<footer>フッター</footer>

<!-- オフカンバス -->
<div id="offcanvas">
  <!-- オフカンバスのインナー -->
  <div class="uk-offcanvas-bar">

    <!-- 閉じるボタン 以下の通りにすると自動でXマークと閉じるボタンが実装される-->
    <button class="uk-offcanvas-close" type="button"></button>

    <!-- ここから下にナビゲーションなどオフカンバスのコンテンツを記述 -->
  </div>
</div>

今回は以上です。
この他、Stickyコンポーネント(ナビゲーションを固定する)やScrollspy(スクロールを監視)、アニメーションやパララックスといった、ウェブをリッチに表現するためのコンポーネントもたくさん有ります。
他のフレームワークに比べて敷居も低いので、是非いろいろなコンポーネントを検証してみてくださいね。