トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

アコーディオンUIとサイドバーの開閉UI

アコーディオンUI

サイドバーとかでよくある▶を開くと子が出てくるUIをアコーディオンUIというらしい

f:id:bibinbaleo:20210114170224p:plain

f:id:bibinbaleo:20210114171238p:plain

f:id:bibinbaleo:20210114172540p:plain

狭い表示領域の有効活用

www.hypertextcandy.com

Unityで実装するにはどうしたらいいんだろう~

このアセットに入っているらしい

assetstore.unity.com

ここに載ってた

qiita.com

サイドバーの開閉

XD

左上のハンバーガーを押すと

f:id:bibinbaleo:20210114170514p:plain

メニューが開く

f:id:bibinbaleo:20210114170510p:plain

Inoreader

InoreaderもXDと同じ

f:id:bibinbaleo:20210114171011p:plain

f:id:bibinbaleo:20210114171013p:plain

Youtube

f:id:bibinbaleo:20210115210307p:plain

OnClickすると丸く白く光る

f:id:bibinbaleo:20210115210310p:plain

Notion

Notionは結構複雑でアニメーション付きだった

閉じるときはサイドバー右上の<<マーク

f:id:bibinbaleo:20210114170549p:plain

そして閉じた状態だとこんな感じのハンバーガー

f:id:bibinbaleo:20210114170650p:plain

そしてハンバーガーにマウスオンするとサイドバーがポップアップのようにニョロっと出てくる

f:id:bibinbaleo:20210114170814p:plain



そしてクリックするとサイドバーのカラムがメイン左に差し込まれる感じ。

Twitch

Twitchはこんなマーク

f:id:bibinbaleo:20210115143528p:plain

分かりやすくて好き

f:id:bibinbaleo:20210115143546p:plain

MaterialDesignにあった

f:id:bibinbaleo:20210115144006p:plain

https://material.io/resources/icons/?search=arrow&icon=vertical_align_top&style=baseline

DoozyUIにはも<<はあった

f:id:bibinbaleo:20210115143728p:plain

 

bibinbaleo.hatenablog.com