Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Universal Windows Platform Apps で 追加・変更された UI の見た目について

WinJS 版について。
見た目に関しては他の言語版も同じだと思われます。

 

UWP Apps の UI については後日紹介し今回は 8 からの差分のみ紹介。

 

 

パーツ

f:id:x67x6fx74x6f:20150523125445p:plain

ボタン

8 は 外枠のみの矩形 + 文字 でしたが、
色付き矩形 + 文字 になりました。

 

スライダー

矩形が角丸になりました。

 

トグル

こちらも矩形が角丸になりました。
Build 10122 で上の画像より更に変更された模様。

 


ビュー

SplitView

所謂、ハンバーガーメニュー。
振る舞いも大体同じです。
http://try.buildwinjs.com/#splitview

スマートフォン等画面が小さい端末は View Sample を押してください)

 

Pivot

タイトル文字が小さくなり、画面が小さい場合は左右移動のボタンが付きます。

http://try.buildwinjs.com/#pivot

 

XYFocus

ゲームパッドやキーボード用。
カーソルでタイルを移動させることができます。
Xbox One 用につくられたものだと思われます

http://try.buildwinjs.com/#xyfocus

 

Tab

WinJS の機能にありませんが、他の OS のタブと同じような見た目と振る舞いです。

 


コマンドバー

8 の App バーと同等のものです。
画面上や下に表示されます。

http://try.buildwinjs.com/#appbar

 

 

その他

クリック、タッチスクリーン、ペン、ゲームパッド、キーボード、HoloLens の視線など、複数ポインティングデバイスで操作される事が想定されています。
そのためコンテキストメニューなどポインティングデバイスよって形状が変化するものがあります。

 

WinJS と他のライブラリとの連携

Github に Angular, Knockout, React, Bootstrap などに連携させるライブラリが公開されています。

AngularJS
https://github.com/winjs/angular-winjs

KnockoutJS
https://github.com/winjs/knockout-winjs

React
https://github.com/winjs/react-winjs

Bootstrap
https://github.com/winjs/bootstrap-winjs

スポンサーリンク