ENTEREAL

UIKit 2.9.0 での変更点

UIkit

Bootstrapの代替として注目されているUikitが約2ヶ月ぶりにメジャーアップデートされ、最新が2.9.0となりました。

今回は、そのアップデート内容について簡単な概要を説明します。詳細に関しましては、本家プロジェクトページをご参照ください。


重要変更

Renamed keyframe animation uk-spin to uk-rotate

キーフレームアニメーションの「uk-spin」が「uk-rotate」に改名されました。


Removed uk-sticky class, use [data-uk-sticky] instead

「uk-sticky」クラスが削除されました。代替として、「data-uk-sticky」というアトリビュートを付与します。※クラスではありません。


アドオン/エレメント/コンポーネント/機能の追加

UIkit
Added flex add-on

flex (フレックス)」アドオンが追加されました。

Flexアドオンとは、基本的にフレキシブルなレイアウト設定ができるベースのアドオンです。現時点では、位置調整のみの機能しか実装されていませんが、将来的な機能追加が明言されています。機能が充実すると非常に便利なアドオンになると思います。

Box
Box
Box

UIkit
Added cover add-on

cover (カバー)」アドオンが追加されました。

Coverアドオンとは、ページの幅に応じて親要素にフィットした画像や動画のサイズ調整を行うアドオンです。


Added new keyframes and classes to animation component

コンポーネントのアニメーション用の新たなキーフレームと、クラスが追加されました。


UIkit
Added height viewport to utility component

utility (ユーティリティ)」コンポーネントに「hight viewport (高さのビューポート)」.uk-height-viewportが追加されました。


Added position classes to utility component

utility (ユーティリティ)」コンポーネントに位置を設定するためのクラス群が追加されました。


クラス 説明
.uk-position-absolute エレメントに絶対値ポジションを付与します。
.uk-position-relative エレメントに相対値ポジションを付与します。
.uk-position-cover エレメントに絶対値ポジションを付与し、親要素のエリア内一杯に拡大して表示します。

UIkit
Added threshold parameter to sortable add-on

sortable (ソータブル)」アドオンに「threshold (閾値)」パラメータが追加されました。

マウスでエレメントをD&D(ドラッグ&ドロップ)初めて、何px動かしたところで、sortableの移動中モードに遷移するかを決めるパラメータです。


Added reload toggle elements on dom update

DOMアップデート時に「reload toggle (リロードトグル)」エレメントが追加されました。


UIkit
Added hover color for badges

badges (バッジ)」にホバー時のカラー設定が追加されました。


UIkit
Added animation and negative offset support for sticky add-on

sticky (スティッキー)」アドオンにマイナス(ネガティブ)オフセットのサポートが追加されました。

...

UIkit
Added datepicker animation

datepicker (日付選択)」にアニメーションが追加されました。


UIkit
Added additional class parameter for the tooltip add-on

tooltip (ツールチップ)」アドオンに追加クラスのパラメータが追加されました。


UIkit
Added iframe option + load custom css in iframe to htmleditor add-on

html editor (HTMLエディタ)」アドオンにiframeオプション + (iframe内で読み込む)カスタムCSS設定が追加されました。


UIkit
Added more settings options for upload add-on

upload (ファイルアップロード)」アドオンに更に幾つかのオプション設定が追加されました。


Added trigger uk.dropped event when files were dropped to upload add-on

upload (ファイルアップロード)」アドオンにファイルをD&D(ドラッグ&ドロップ)した際の「uk.dropped」トリガーが追加されました。



UIkit
Added trigger uk.offcanvas.hide when offcanvas hides

off-canvas (スライドイン/アウト)」が非表示になった際に「uk.offcanvas.hide」のトリガーが追加されました。


UIkit
Added allow multiple connect container to switcher component

switcher (スイッチャー)」コンポーネントに複数の同時連携が可能な機能が追加されました。

スイッチャーとは、いわゆるTABコンポーネントに似たもので、タブやボタンを押した時に、それに応じた別エレメントのコンテンツを表示するものです。今まで1対1の連携であったところが、1対多になり、一つのアクションで複数のエレメントを表示/非表示する事が出来るようになりました。


Added switch accross multiple connected switcher containers

switcher (スイッチャー)」コンテナが複数の接続を跨ぐスイッチング機能が追加されました。

上記に加え、スイッチャー側も複数に対応し、多対多の関係で複数のエレメントを表示/非表示する事が出来るようになりました。


Added switch active content from within connected switcher containers via data-uk-switcher-item attribute

「data-uk-switcher-item」アトリビュートで、接続された「switcher (スイッチャー)」コンテナをアクティブにする機能が追加されました。

これは、逆にコンテンツのリンク等から、タブやボタン側のアクティブ状態を変更する機能です。


アドオン/エレメント/コンポーネント/機能の更新

Updated active datepicker closes on window resize

ウインドのリサイズ時にアクティブなdatepickerが閉じるように変更されました。


Refactored sticky add-on and fixed z-index and box sizing

sticky (スティッキー)」アドオン、「fixed z-index (固定z-inex)」、「box sizing (ボックスサイジング)」について、動作を再構成しました。


Refactored responsive tab behavior

「responsive tab (レスポンシブタブ)」の動作を再構成しました。


Hide tooltip if source element is hidden or removed via JavaScript

JavaScript経由でエレメントが非表示や削除された場合に、「tooltip (ツールチップ)」を非表示に変更しました。


アドオン/エレメント/コンポーネント/機能の不具合修正

Fixed using data-uk-margin in dropdowns

dropdown (ドロップダウン)」における、「data-uk-margin」の使用に関して、不具合を修正しました。


Fixed target option in tab js component

tab (タブ)」コンポーネントにおける、「target option (ターゲットオプション)」の不具合を修正しました。


UIkit
Fixed autocomplete return type on ajax request

オートコンプリート (補完フィールド)」アドオンにおける、「ajax request」の不具合を修正しました。


Fixed autocomplete from overflowing its container

オートコンプリート (補完フィールド)」アドオンにおける、オーバーしたコンテナについての不具合を修正しました。


Fixed tooltip position calculation when body or html element is fixed

bodyやhtmlエレメントが固定されていた(CSSでfixedに設定されていた)場合のツールチップの表示位置計算の不具合を修正しました。


Fixed sortable add-on prevents default behaviour of child elements on click

sortable (ソータブル)」アドオンにおける、デフォルトの子要素のクリックが出来ない不具合を修正しました。


Fixed off-canvas in IE 9

IE9で発生する「off-canvas (スライドイン/アウト)」の不具合を修正しました。


Fixed animation reverse timing function

「animation reverse timing (アニメーションの繰り返しタイミング)」を行う関数の不具合を修正しました。


アドオン/エレメント/コンポーネント/機能の削除

Removed Google maps automatic URL detection

Google mapにおける、自動URL判定(検索)機能を削除しました。


Removed search close button and loading spinner

search (検索フィールド)」の「close button (消去ボタン)」と「loading spinner (ロード時表示)」を削除しました。


Removed Promise polyfill

「Promise polyfill」を削除しました。


Tags

Same Category

住所入力サポート機能

メニュー開閉アニメーションボタン

生まれ変わったnoCAPTCHAに関する件