SusImg

Image host with sizing, cover crop, rounded corners, and load / error hooks.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`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"`

Slots

Name
`placeholder`
`error`

Events

Name	Field	Payload
`Load`	`OnLoad`	`Texture2D`
`Error`	`OnError`	`string`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

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

Usage

xml

<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>

csharp

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

Notes

LazySrc loads after first paint when set.
Slots placeholder / error customize the empty and failed states.

SusImg ​