A component for implementing custom pickers (date, select, color, etc...).
It consists of an element which when click opens a dropdown (in mobile resolutions a modal).
It handles the following interactions:
<Ui.Picker placeholder="Pick something!" position={Ui.Position.BottomLeft} icon={Ui.Icons:CHEVRON_DOWN} label={Maybe.Nothing} size={Ui.Size.Px(16)} panel=<>"Panel"</> matchWidth={false} disabled={false} invalid={false} offset={10}/>
<> <Ui.Picker label={Maybe.Just(<>"Label..."</>)} placeholder="Pick something!" panel=<>"Panel..."</> /> <Ui.Picker placeholder="Pick something!" label={Maybe.Nothing} panel=<>"Panel..."</> /></>
<> <Ui.Picker placeholder="Pick something!" size={Ui.Size.Px(12)} panel=<>"Panel..."</> /> <Ui.Picker placeholder="Pick something!" size={Ui.Size.Px(16)} panel=<>"Panel..."</> /> <Ui.Picker placeholder="Pick something!" size={Ui.Size.Px(20)} panel=<>"Panel..."</> /></>
<> <Ui.Picker placeholder="Pick something!" icon={Ui.Icons.CHEVRON_DOWN} panel=<>"Panel..."</> /> <Ui.Picker placeholder="Pick something!" icon={Ui.Icons.BEAKER} panel=<>"Panel..."</> /></>
<Ui.Grid> <Ui.Picker position={Ui.Position.TopLeft} placeholder="Top Left" panel=<>"Panel..."</> /> <Ui.Picker position={Ui.Position.TopCenter} placeholder="Top Center" panel=<>"Panel..."</> /> <Ui.Picker position={Ui.Position.TopRight} placeholder="Top Right" panel=<>"Panel..."</> /> <Ui.Picker position={Ui.Position.BottomLeft} placeholder="Bottom Left" panel=<>"Panel..."</> /> <Ui.Picker position={Ui.Position.BottomCenter} placeholder="Bottom Center" panel=<>"Panel..."</> /> <Ui.Picker position={Ui.Position.BottomRight} placeholder="Bottom Right" panel=<>"Panel..."</> /></Ui.Grid>
<> <Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={5}/> <Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={10}/> <Ui.Picker placeholder="Pick Something!" panel=<>"Panel..."</> offset={20}/></>
<> <Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</> matchWidth={false} /> <Ui.Picker placeholder="Pick something!" panel=<>"Panel..."</> matchWidth={true} /></>
Mint UI is a design system and component library for building websites, web and desktop applications.