Skip to content

Latest commit

 

History

History
45 lines (36 loc) · 1.84 KB

0f92b2d5c7ae6a.md

File metadata and controls

45 lines (36 loc) · 1.84 KB
title emoji type topics published published_at
UI Toolkit TextFieldのLabelとInputを縦に並べる
🫥
tech
unity
uitoolkit
true
2023-09-14 21:08

1. UI Toolkitとは

UI Toolkitは、ユーザーインターフェース(UI)を開発するための機能、リソース、ツールのコレクションです。UI Toolkitを使用して、Unity Editor用のカスタムUIや拡張機能、ランタイムデバッグツール、ゲームやアプリケーションのランタイムUIを開発できます。

UI Toolkitは、標準的なWeb技術に触発されています。Webページやアプリケーションを開発した経験があれば、知識は移行可能であり、コアコンセプトはなじみがあります。

Unity - Manual: UI Toolkit より

2. できるもの

TextFieldの初期 ![](https://storage.googleapis.com/zenn-user-upload/df45a36a54d0-20230914.png =300x)

LabelとInputが縦に並んでいる ![](https://storage.googleapis.com/zenn-user-upload/207c6da2e186-20230914.png =300x)

3. 環境

  • Unity 2022.3.5f1

4. 方法

4.1. Viewport から変更する

青い枠内の TextField の文字の横にある Flex Direction を 2回クリックする。 ![](https://storage.googleapis.com/zenn-user-upload/752f9039cb94-20230914.png =300x) TextFieldの初期 ![](https://storage.googleapis.com/zenn-user-upload/dc44295cf328-20230914.png =300x) LabelとInputが縦に並ぶ

4.2. Inspector から変更する

Inlined StylesFlex にある Direction を変更する ![](https://storage.googleapis.com/zenn-user-upload/2699e2500243-20230914.png =300x) TextFieldの初期 ![](https://storage.googleapis.com/zenn-user-upload/ab22dee5f477-20230914.png =300x) LabelとInputが縦に並ぶ