A component for showing the user hidden content.
On desktop resolution the content is shown in a drop down panel where as on mobile resolution it's shown in a modal.
<Ui.Dropdown position={Ui.Position.TopLeft} closeOnOutsideClick={false} matchWidth={false} open={true} offset={5} element={ <Ui.Button label="Click to Toggle"/> } content={ <Ui.Dropdown.Panel> "Content" </Ui.Dropdown.Panel> }/>
<> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="A Button!"/>} open={true} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<div>"A simple div!"</div>} open={true} /></>
<> <Ui.Dropdown content={<div>"A simple div!"</div>} element={<Ui.Button label="Element"/>} open={true} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"A dropdown panel!"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} /></>
<> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={false} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} /></>
<> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.TopLeft} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.TopCenter} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.TopRight} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.BottomLeft} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.BottomCenter} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} position={Ui.Position.BottomRight} open={true} offset={5} /></>
<> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} offset={5} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} offset={10} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} offset={25} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} open={true} offset={50} /></>
<> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} matchWidth={false} open={true} /> <Ui.Dropdown content={<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>} element={<Ui.Button label="Element"/>} matchWidth={true} open={true} /></>
Mint UI is a design system and component library for building websites, web and desktop applications.