Ui.Dropdown.Panel

A component to use with dropdowns, but can be used standalone as well.

Interactive Demo

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

Title
Content
Title
Width
Size (16px)
<Ui.Dropdown.Panel
size={Ui.Size.Px(16)}
title=<{ "Title" }>
width="auto">
"Content"
</Ui.Dropdown.Panel>
Title

The title can be controlled with the title property.

If the title is blank or omitted it will be hidden.
Content
Title
Content
Lab
Content
<>
<Ui.Dropdown.Panel>"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel title=<>"Title"</>>"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel
title={
<Ui.Container>
<Ui.Icon icon={Ui.Icons.BEAKER}/>
"Lab"
</Ui.Container>
}
>"Content"</Ui.Dropdown.Panel>
</>
Size

The size can be controlled with the size property.

Title
Content
Title
Content
Title
Content
<>
<Ui.Dropdown.Panel size={Ui.Size.Px(12)} title=<>"Title"</>>"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel size={Ui.Size.Px(16)} title=<>"Title"</>>"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel size={Ui.Size.Px(20)} title=<>"Title"</>>"Content"</Ui.Dropdown.Panel>
</>
Width

The width can be controlled with the width property.

Content
Content
Content
<>
<Ui.Dropdown.Panel width="auto">"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel width="100px">"Content"</Ui.Dropdown.Panel>
<Ui.Dropdown.Panel width="200px">"Content"</Ui.Dropdown.Panel>
</>
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.