UIkit Plus α

About

作った経緯

Installation

使い方

UIkit3と合わせて取り込んでください。
jsDelivrのCDNを使用することができます。

CSS
<!-- uikit -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit-icons.min.js"></script>

<!-- uikit plusa -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/playree/uikit-plusa@1.0.3/dist/uikit-plusa.min.css" />
<script src="https://cdn.jsdelivr.net/gh/playree/uikit-plusa@1.0.3/dist/uikit-plusa.min.js"></script>

ローカルに取り込む場合は、GitHubのリリースページよりダウンロードすることができます。

Paragraph

段落表示

v1.0.0～

h1～h6の先頭にシンボルを表示します。

CSS
<h3 class="ukp-paragraph">Paragraph1</h3>
abc123
<h3 class="ukp-paragraph">Paragraph2</h3>
xyz456
<h3 class="ukp-paragraph" ukp-symbol="@">Paragraph3</h3>

表示幅による表示制御表記(@s,@m,@l,@xl)も可能です。

Class	Description
.ukp-paragraph@s	640px 以上の場合のみ表示
.ukp-paragraph@m	960px 以上の場合のみ表示
.ukp-paragraph@l	1200px 以上の場合のみ表示
.ukp-paragraph@xl	1600px 以上の場合のみ表示

Sub Text

サブテキスト

v1.0.0～

h1～h6にサブテキストを表示します。

CSS
<h3 class="ukp-paragraph"><span class="ukp-attsubtext">Main Text<p>Sub text</p></span></h3>
<h3 class="ukp-paragraph"><span class="ukp-attsubtext-end">ABCDefgh<p>End text</p></span></h3>
<h3 class="ukp-paragraph uk-heading-line"><span class="ukp-attsubtext-end">ABCDefgh<p>End text</p></span></h3>

Box List

ボックスタイプのリスト

v1.0.0～

枠線で囲うタイプのリスト表示です。
リンクとして設定することもできます。

CSS
<div class="uk-width-large ukp-boxlist uk-margin-top">
	<div class="ukp-boxlist-item">abc123</div>
	<div class="ukp-boxlist-item">xyz456</div>
	<div class="ukp-boxlist-item"><h3>Header</h3>substring789</div>
</div>
<div class="uk-width-large ukp-boxlist uk-margin-top">
	<a class="ukp-boxlist-item" href="">abc123</a>
	<a class="ukp-boxlist-item" href="">xyz456</a>
	<a class="ukp-boxlist-item" href=""><h3>Header</h3>substring789</a>
</div>

枠線の色も変更可能です。

• .ukp-border-primary : Blue
• .ukp-border-danger : Red

CSS
<div class="uk-width-large ukp-boxlist ukp-border-primary uk-margin-top">
	<div class="ukp-boxlist-item">abc123</div>
	<div class="ukp-boxlist-item">xyz456</div>
</div>
<div class="uk-width-large ukp-boxlist ukp-border-danger uk-margin-top">
	<a class="ukp-boxlist-item" href="">abc123</a>
	<a class="ukp-boxlist-item" href="">xyz456</a>
</div>

Border Table

枠線タイプのテーブル

v1.0.0～

シンプルな枠線タイプのテーブルです。

TH1	TH2	TH3
abc	def	ghi
123	456	789

CSS
<table class="uk-table ukp-table-border uk-margin-top">
	<tr>
		<th>TH1</th><th>TH2</th><th>TH3</th>
	</tr>
	<tr>
		<td>abc</td><td>def</td><td>ghi</td>
	</tr>
	<tr>
		<td>123</td><td>456</td><td>789</td>
	</tr>
</table>

枠線の色も変更可能です。

• .ukp-border-primary : Blue
• .ukp-border-danger : Red

TH1	TH2	TH3
abc	def	ghi

TH1	TH2	TH3
abc	def	ghi

CSS
<table class="uk-table ukp-table-border ukp-border-primary uk-margin-top">
	<tr>
		<th>TH1</th><th>TH2</th><th>TH3</th>
	</tr>
	<tr>
		<td>abc</td><td>def</td><td>ghi</td>
	</tr>
</table>
<table class="uk-table ukp-table-border ukp-border-danger uk-margin-top">
	<tr>
		<th>TH1</th><th>TH2</th><th>TH3</th>
	</tr>
	<tr>
		<td>abc</td><td>def</td><td>ghi</td>
	</tr>
</table>

Titled Preformatted Text

タイトル付き整形済みテキスト

v1.0.0～

ソースの表示などに適した整形済みテキストです。
左上にタイトルを付けることができます。

CSS
<pre class="ukp-pre-title"><span>CSS</span>
<code>Titled Preformatted text</code></pre>

下記ダークモードとの２種類を用意しています。

CSS
<pre class="ukp-pre-title-dark"><span>CSS</span>
<code>Titled Preformatted Text</code></pre>

<pre> 直下の <span> の中身がタイトルになります。

Title
<pre class="ukp-pre-title-dark"><span>Title</span>
<code>Titled Preformatted Text</code></pre>

Side Fix Nav

右上固定のナビゲーション

v1.0.0～ update : v1.0.2

右上に固定表示するナビゲーションです。
基本的には本家UIkitのScrollspy navの動作になります。
右上固定表示となることと、アクティブメニューの表示が少し変わります。
サンプルとして、本ページをPCなどで表示した際に右上に表示されているメニューをご覧ください。

CSS
<div class="ukp-sidefixnav uk-visible@l" ukp-for-small>
	<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
		<li><a href="#paragraph">Paragraph</a></li>
		<li><a href="#sub_text">Sub Text</a></li>
		<li><a href="#box_list">Box List</a></li>
		<li><a href="#border_table">Border Table</a></li>
		<li><a href="#titled_pre">Titled Preformatted Text</a></li>
		<li><a href="#side_fix_nav">Side Fix Nav</a></li>
		<li class="uk-nav-divider"></li>
		<li><a href="" target="_blank"><span uk-icon="icon: github"></span> Source</a></li>
		<li><a href="" target="_blank"><span uk-icon="icon: uikit"></span> UIkit3</a></li>
		<li class="uk-nav-divider"></li>
		<li><a href="" target="_blank"><span uk-icon="icon: home"></span> funlab, Inc.</a></li>
	</ul>
</div>

デフォルトでは画面右端(画面幅が広がると右に移動する)に表示されますが、
下記属性を付与することで各Containerサイズに適した(画面幅が広がっても右に移動しない)表示にできます。

• ukp-for-xsmall : .uk-container-xsmall に適した位置に表示します
• ukp-for-small : .uk-container-small に適した位置に表示します
• ukp-for-large : .uk-container-large に適した位置に表示します

※classではなく、属性ですのでご注意ください。

ukp-scroll の属性を付与することで、スクロールするよう(高さは600pxに固定)にすることもできます。

Floating Button

フローティングボタン

v1.0.0～

フローティングの丸ボタンです。

+

CSS
<a class="uk-button uk-button-primary ukp-button-floating" href="" uk-icon="menu"></a>
<a class="uk-button uk-button-danger ukp-button-floating" href="">+</a>

SmallサイズとLargeサイズ。

+

+

CSS
<a class="uk-button uk-button-primary ukp-button-floating uk-button-small" href="" uk-icon="menu"></a>
<a class="uk-button uk-button-danger ukp-button-floating uk-button-small" href="">+</a>
<a class="uk-button uk-button-primary ukp-button-floating uk-button-large" href="" uk-icon="menu"></a>
<a class="uk-button uk-button-danger ukp-button-floating uk-button-large" href="">+</a>

例えば、ページトップへスクロールするフローティングボタンの場合。
サンプルとして、本ページ右下にあるフローティングボタンをご覧ください。

CSS
<a class="uk-button uk-button-primary ukp-button-floating uk-button-small
	uk-position-bottom-right uk-position-fixed ukp-margin-mini" 
	href="#top" uk-icon="arrow-up" uk-tooltip="title: Top; pos: left" uk-scroll></a>

Margin Mini

極小のマージン設定

v1.0.0～

本家UIkitの.uk-margin-smallよりも、さらに小さいマージンを設定します。
余白をほんのちょっとだけあけたい場合などに。

• .ukp-margin-mini
• .ukp-margin-mini-top
• .ukp-margin-mini-bottom
• .ukp-margin-mini-left
• .ukp-margin-mini-right

+

CSS
<a class="uk-button uk-button-primary ukp-button-floating ukp-margin-mini-right" href="" uk-icon="menu"></a>
<a class="uk-button uk-button-danger ukp-button-floating ukp-margin-mini-right" href="">+</a>

Message Box

メッセージ表示

v1.0.0～

シンプルなメッセージ表示です。

CSS
<div class="ukp-mesbox uk-width-medium">
	This is a message.<br>
	Simple is the best.
	<p class="uk-text-right">UIkit Plus α</p>
</div>

背景色を設定したい場合。

CSS
<div class="ukp-mesbox uk-width-medium">
	<div class="uk-padding-small" style="background-color: #faf8f0;">
		This is a message.<br>
		Simple is the best.
		<p class="uk-text-right">UIkit Plus α</p>
	</div>
</div>

Movable Label Input

ラベルが動くインプットボックス

v1.0.1～ update : v1.0.2

プレースホルダ的な表示(通常時)から、ラベルが上部に移動する(フォーカス時)タイプのインプットボックスです。

CSS
<div class="ukp-input-field">
	<input id="mli1" class="uk-input uk-form-width-medium" type="text">
	<label class="ukp-input-label" for="mli1">label</label>
</div>
<div class="ukp-input-field">
	<input id="mli2" class="uk-input uk-form-width-medium" type="text" value="Test">
	<label class="ukp-input-label" for="mli2">label</label>
</div>

LargeサイズとSmallサイズです。

CSS
<div class="ukp-input-field">
	<input id="mli3" class="uk-input uk-form-width-medium uk-form-large" type="text">
	<label class="ukp-input-label" for="mli3">Large</label>
</div>
<div class="ukp-input-field">
	<input id="mli4" class="uk-input uk-form-width-medium uk-form-small" type="text">
	<label class="ukp-input-label" for="mli4">Small</label>
</div>

Infinite Scroll

無限スクロール

v1.0.3～

最後までスクロールした際に自動で続きのデータを読み込むことで、最終データまでの無限スクロールを実現します。

スクロール用の領域と、読み込み中に表示するオブジェクトを用意して、UkpInfiniteScrollクラスをnewします。
UkpInfiniteScrollのコンストラクタには下記を指定します。

• 第１引数：スクロール用の領域タグのid（ウィンドウ自体を対象とする場合はnullを指定）
• 第２引数：読み込み中に表示するオブジェクトタグのid
• 第３引数：読み込み(スクロール最終到達)時に呼ばれる関数

使用するメソッドは下記になります。

• add()
  これで表示アイテムを追加します。
• comp()
  表示アイテムの追加が完了したら呼び出します。(まだ読み込むデータがある場合)
  読み込み中の表示が消え、再度スクロールの最終到達を待つ状態になります。
• finish()
  読み込むデータがなくなった場合に呼び出します。(これ以上スクロールしない)

上記サンプルのコードは下記。

CSS
<div id="scroll_area" class="uk-container uk-container-xsmall uk-margin-top" 
style="height: 300px; overflow-y: scroll; border: solid 1px #ddd; padding: 1rem;">
	<div id="loading" class="uk-width-1-1 uk-text-center uk-margin-top">
		<span uk-spinner="ratio: 3"></span>
	</div>
</div>
<script>
	const el_item = '<div class="uk-card uk-card-primary uk-card-body uk-margin-bottom">' +
		'<h3 class="uk-card-title">Item{{count}}</h3>' +
		'<p>Try scrolling down.</p>' +
		'<p>下にスクロールしてみてください。</p>' +
		'</div>';

	document.addEventListener('DOMContentLoaded', () => {
		let sc_count = 1;
		let sc = new UkpInfiniteScroll(
			'scroll_area', // スクロール対象タグのidを指定する
			'loading',     // 読み込み中に表示するタグのidを指定する
			(self, count) => {
				console.log('loadItem', count);
				// self  : UkpInfiniteScrollクラス自身のオブジェクト(newしたものと同一)
				// count : 読み込み回数(初回読み込みは0)
				// ここで通信などで表示アイテムを読み込む。
				// setTimeout()の部分を通信などに置き換えてください。
				setTimeout(() => {
					for (i=0; i<5; i++) {
						// 表示アイテムの追加
						self.add(el_item.replace('{{count}}', sc_count++));
					}
					if (sc_count > 20) {
						// スクロールによる読み込みを終了する場合
						self.finish();
					} else {
						// スクロールによる読み込みを続行する場合
						self.comp();
					}
				}, 1000)
			});
	});
</script>

ウィンドウ自体のスクロールに対応したサンプルは下記ボタンからどうぞ。
別ウィンドウで開きます。

Infinite Scroll Sample

History

履歴

Ver	Date	Note
1.0.3	2020/04/23	Infinite Scroll を追加。
1.0.2	2020/04/01	Side Fix Nav をスクロール可能に。 Movable Label Input をLarge/Smallサイズに対応。
1.0.1	2020/03/29	Movable Label Input を追加。
1.0.0	2020/03/22	初版リリース。