Ui.ImageCrop

A simple image cropper component.

Interactive Demo

You can play around with a Ui.ImageCrop below using the controls.

Size (16px)
Embeeded
<Ui.ImageCrop
size={Ui.Size.Px(16)}
embedded={false}
value={{
source = @asset(../../assets/images/white-beach.jpg),
height = 0.50,
width = 0.50,
y = 0.25,
x = 0.25
}}/>
Size

The size of the component can be set with the size property.

<>
<div style="width: 250px; height: 200px; display: grid;">
<Ui.ImageCrop
size={Ui.Size.Px(12)}
value={
{
source: @asset(../../assets/images/white-beach.jpg),
height: 0.5,
width: 0.5,
y: 0.25,
x: 0.25
}
}
/>
</div>
<div style="width: 250px; height: 200px; display: grid;">
<Ui.ImageCrop
size={Ui.Size.Px(16)}
value={
{
source: @asset(../../assets/images/white-beach.jpg),
height: 0.5,
width: 0.5,
y: 0.25,
x: 0.25
}
}
/>
</div>
<div style="width: 250px; height: 200px; display: grid;">
<Ui.ImageCrop
size={Ui.Size.Px(20)}
value={
{
source: @asset(../../assets/images/white-beach.jpg),
height: 0.5,
width: 0.5,
y: 0.25,
x: 0.25
}
}
/>
</div>
</>
Embedded

The image cropper can be embedded by setting embedded property to true

This will remove the background, border and padding.

<div style="width: 250px; height: 200px; display: grid;">
<Ui.ImageCrop
embedded={true}
value={
{
source: @asset(../../assets/images/white-beach.jpg),
height: 0.5,
width: 0.5,
y: 0.25,
x: 0.25
}
}
/>
</div>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.