A simple image cropper component.
<> <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></>
<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 is a design system and component library for building websites, web and desktop applications.