SusImg

图片容器 — 尺寸控制、cover 裁剪、圆角，以及加载 / 错误钩子。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Src	Prop<string>	""
LazySrc	Prop<string>	""
Alt	Prop<string>	""
Height	Prop<float>	0f
MaxHeight	Prop<float>	0f
Width	Prop<float>	0f
MaxWidth	Prop<float>	0f
Cover	Prop<bool>	false
Stretch	Prop<bool>	false
Anchor	Prop<string>	"center"
Rounded	Prop<string>	""
Gradient	Prop<string>	""
AspectRatio	Prop<float>	0f
Fit	Prop<string>	"width"

插槽

名称
placeholder
error

事件

名称	字段	载荷
Load	OnLoad	Texture2D
Error	OnError	string

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-img
• sus-img__error
• sus-img__error-text
• sus-img__gradient
• sus-img__placeholder
• sus-img__placeholder-text
• sus-img__surface
• sus-img--cover
• sus-img--error
• sus-img--rounded-0
• sus-img--rounded-circle
• sus-img--rounded-lg
• sus-img--rounded-md
• sus-img--rounded-pill
• sus-img--rounded-sm
• sus-img--rounded-xs
• sus-img--stretch

用法

<template>
  <sus:SusImg Src="portraits/hero"
              Alt="Hero portrait"
              Cover="true"
              Rounded="md"
              AspectRatio="1"
              @load="OnLoaded"
              @error="OnFailed" />
</template>

<script>
void OnLoaded(Texture2D tex) { /* … */ }
void OnFailed(string reason) { /* … */ }
</script>

var img = new SusImg();
img.Src.Value = "ui/banner";
img.Cover.Value = true;
img.MaxHeight.Value = 180f;
img.OnError += msg => { /* … */ };

备注

• 设置 LazySrc 时会在首次绘制后加载。
• 插槽 placeholder / error 可自定义空状态和失败状态。