ウイ
商品説明
このコンポーネントは、エンティティに関連するユーザインタフェースを確立する。
プロパティ一覧
提供されたスキーマに対して、同じフォーマットでテーブルを作成してみる:
プロパティ一覧
| Property | Type | 初期値 | 商品説明 |
|---|---|---|---|
| タイプ (必須) | ストリング | サポートされているタイプは以下の通り: オーバーレイ」と「3D | |
| font | ストリング | 使用フォント | |
| フォントサイズ | f32 | 文字の大きさ | |
| position | ストリング | ポジショニングタイプ | |
| 不透明性 | f32 | 1 | オブジェクト全体の不透明度 |
| 背景の不透明度 | f32 | 0 | 背景の不透明度 |
| 背景サイズ | ストリング | 背景のサイズ | |
| 背景 | ストリング | 背景色 | |
| カラー | ストリング | 前景色（文字色 | |
| テキスト | ストリング | "" | オブジェクトのテキスト内容 |
| image | ストリング | null | 画像リソース |
| 固定サイズ | ブーリアン | サイズが固定かどうかを判断する | |
| width | ストリング | 100 | オブジェクトの幅 |
| height | ストリング | 100 | オブジェクトの高さ |
| top | ストリング | トップ・ボーダーからの縦位置 | |
| left | ストリング | 左ボーダーからの水平位置 | |
| 下 | ストリング | ボトムボーダーからの垂直位置 | |
| 右 | ストリング | 右ボーダーからの水平位置 | |
| ボーダーカラー | ストリング | ボーダーの色 | |
| ボーダー半径 | f32 | 0 | 要素の角を丸める |
| アラインコンテンツ | ストリング | コンテンツアイテム間のスペース配分: 'flex-start'、'center'、'flex-end'、'stretch'、'space-between'、'space-around' | |
| 整列項目 | ストリング | 十字軸上の項目の整列: 'flex-start'、'center'、'flex-end'、'stretch'、'baseline' | |
| アラインセルフ | ストリング | 個々のフレックスアイテムの配置: 'auto'、'flex-start'、'center'、'flex-end'、'stretch'、'baseline'。 | |
| ボーダー幅 | f32 | 0 | ボーダーの幅 |
| カラムギャップ | ストリング | 列間の隙間 | |
| 方向 | ストリング | テキストの方向: inherit'、'LTR'、'RTL' | |
| 表示 | ストリング | 要素の表示タイプ: 'flex', 'none' | |
| フレックス | f32 | フレックス・グロース、シュリンク、ベーシス・ショートハンド | |
| フレックスベース | ストリング | フレックスアイテムの初期メインサイズ | |
| フレックス方向 | ストリング | コンテナ内のフレックスアイテムの方向: 許可される値: 'column', 'column-reverse', 'row', 'row-reverse' | |
| フレックスグロウ | f32 | フレックス項目が成長する能力を定義する | |
| フレックスシュリンク | f32 | フレックスアイテムが縮小する機能を定義する。 | |
| フレックスラップ | ストリング | フレックスアイテムを折り返すかどうか: 許可される値: 'no-wrap', 'wrap', 'wrap-reverse' | |
| ギャップ | ストリング | フレックス・アイテム間のギャップ | |
| 正当化コンテンツ | ストリング | 主軸上の項目の配置: 'flex-start'、'center'、'flex-end'、'space-between'、'space-around'、'space-evenly' | |
| マージン | ストリング | 要素周囲のマージン | |
| マージンボトム | ストリング | 下マージン | |
| マージン左 | ストリング | 左マージン | |
| マージン右 | ストリング | 右マージン | |
| マージントップ | ストリング | トップマージン | |
| 最大高さ | ストリング | エレメントの最大高さ | |
| 最大幅 | ストリング | エレメントの最大幅 | |
| ミニハイト | ストリング | 要素の最小高さ | |
| 最小幅 | ストリング | 要素の最小幅 | |
| オーバーフロー | ストリング | 要素のサイズを超えるコンテンツをどのように扱うか: 'visible'、'hidden'、'scroll' | |
| パディング | ストリング | 要素内部のパディング | |
| パディング・ボトム | ストリング | ボトムパッド | |
| パディング左 | ストリング | 左パディング | |
| パディング右 | ストリング | 右詰め | |
| パディングトップ | ストリング | トップ・パディング | |
| 行間 | ストリング | 列間の隙間 | |
| テキストアライン | ストリング | 要素内のテキストの配置: 'left'、'right'、'center'、'justify' |
関数一覧
Get
Returns a read-only reference.
Example
ecs.Ui.get(world, component.eid)
Set
Ensures the component exists on the entity, then assigns the (optional) data to the component.
Example
ecs.Ui.set(world, component.eid, {
type: 'overlay',
background: '#FFFFFF'
})
Mutate
Perform an update to the component within a callback function. Return true to indicate no changes made.
Example
ecs.Ui.mutate(world, component.eid, (cursor) => {
cursor.opacity = 0.5;
cursor.text = 'Hello World!';
cursor.width = 150;
return false;
})
Remove
Removes the component from the entity.
Example
ecs.Ui.remove(world, component.eid)
Has
Returns true if the component is present on the entity.
Example
ecs.Ui.has(world, component.eid)
Reset
Adds, or resets the component to its default state.
Example
ecs.Ui.reset(world, component.eid)
Advanced Functions
Cursor
Returns a mutable reference. Cursors are reused so only one cursor for each component can exist at a time.
Example
ecs.Ui.cursor(world, component.eid)
Acquire
Same behavior as cursor, but commit must be called after the cursor is done being used.
Example
ecs.Ui.acquire(world, component.eid)
Commit
Called after acquire. An optional third argument determines whether the cursor was mutated or not.
Example
ecs.Ui.commit(world, component.eid)
ecs.Ui.commit(world, component.eid, false)
Dirty
Mark the entity as having been mutated. Only needed in a specific case where systems are mutating data.
Example
ecs.Ui.dirty(world, component.eid)