Dropdown

A dropdown component that takes care of all the annoying bits for you, with added support for programmatic triggers on top.

Usage

Preview
Code

1
---
2
import { Dropdown, Button } from '@studiocms/ui/components';
3
---
4

5
<Dropdown
6
  id='dropdown'
7
  options={[
8
    { label: 'Option 1', value: 'opt-1'},
9
    { label: 'Option 2', value: 'opt-2'},
10
  ]}
11
>
12
  <Button color='primary'>
13
    Trigger Dropdown
14
  </Button>
15
</Dropdown>

1
import { 
class DropdownHelper
DropdownHelper } from '@studiocms/ui/components';
2

3
const 
const dropdown: DropdownHelper
dropdown = new 
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper
A helper function to interact with dropdowns.
@param ― id The ID of the dropdown.
@param ― fullWidth Whether the dropdown should be full width. Not needed normally.
DropdownHelper('dropdown');

You can change the dropdowns position by supplying the align prop.

Preview
Code

1
---
2
import { Dropdown, Button } from '@studiocms/ui/components';
3
---
4

5
<Dropdown
6
  id='dropdown'
7
  options={[
8
    { label: 'Option 1', value: 'opt-1'},
9
    { label: 'Option 2', value: 'opt-2'},
10
  ]}
11
  align='start'
12
>
13
  <Button color='primary'>
14
    Start-aligned
15
  </Button>
16
</Dropdown>
17

18
<!-- Other buttons omitted for simplicity -->

1
import { 
class DropdownHelper
DropdownHelper } from '@studiocms/ui/components';
2

3
const 
const dropdown: DropdownHelper
dropdown = new 
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper
A helper function to interact with dropdowns.
@param ― id The ID of the dropdown.
@param ― fullWidth Whether the dropdown should be full width. Not needed normally.
DropdownHelper('dropdown');

Right-Click Triggering

You can tell the dropdown wrapper to only show the dropdown when it’s children are right-clicked:

Preview
Code

1
---
2
import { Dropdown, Button } from '@studiocms/ui/components';
3
---
4

5
<Dropdown
6
  id='dropdown'
7
  options={[
8
    { label: 'Option 1', value: 'opt-1'},
9
    { label: 'Option 2', value: 'opt-2'},
10
  ]}
11
  triggerOn='right'
12
>
13
  <Button color='primary'>
14
    Right Click
15
  </Button>
16
</Dropdown>

1
import { 
class DropdownHelper
DropdownHelper } from '@studiocms/ui/components';
2

3
const 
const dropdown: DropdownHelper
dropdown = new 
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper
A helper function to interact with dropdowns.
@param ― id The ID of the dropdown.
@param ― fullWidth Whether the dropdown should be full width. Not needed normally.
DropdownHelper('dropdown');

Disabled

You can disable a dropdown by passing the disabled prop.

1
<Dropdown disabled {/* ... */}>
2
  <!-- ... -->
3
</Dropdown>

Option Options

No, you read that right. You can customize the options too. You can individually disable them, turn them into links and also change their color to any of the default colors:

Preview
Code

1
---
2
import { Dropdown, Button } from '@studiocms/ui/components';
3
---
4

5
<Dropdown
6
  id='dropdown'
7
  options={[
8
    { label: 'Default', value: 'default', color: 'default' },
9
    { label: 'Primary', value: 'primary', color: 'primary' },
10
    { label: 'Success', value: 'success', color: 'success' },
11
    { label: 'Warning', value: 'warning', color: 'warning' },
12
    { label: 'Danger', value: 'danger', color: 'danger' },
13
    { label: 'Disabled', value: 'disabled', disabled: true },
14
    { label: 'As Link', value: 'custom-href', href: '/' },
15
  ]}
16
>
17
  <Button color='primary'>
18
    Customized Options
19
  </Button>
20
</Dropdown>

1
import { 
class DropdownHelper
DropdownHelper } from '@studiocms/ui/components';
2

3
const 
const dropdown: DropdownHelper
dropdown = new 
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper
A helper function to interact with dropdowns.
@param ― id The ID of the dropdown.
@param ― fullWidth Whether the dropdown should be full width. Not needed normally.
DropdownHelper('dropdown');

Controlling Dropdowns Programmatically

You know how, this entire page, we’ve been assigning our DropdownHelper to a variable? There’s a reason for that. The DropdownHelper allows you to access some built-in functions for programmatically toggling, showing and hiding the dropdown. You can even register a callback for when one of the dropdowns options has been clicked!

1
import { 
class DropdownHelper
DropdownHelper } from '@studiocms/ui/components';
2

3
const 
const dropdown: DropdownHelper
dropdown = new 
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper
A helper function to interact with dropdowns.
@param ― id The ID of the dropdown.
@param ― fullWidth Whether the dropdown should be full width. Not needed normally.
DropdownHelper('dropdown');
4

5
const dropdown: DropdownHelper
dropdown.
DropdownHelper.registerClickCallback: (func: (value: string) => void) => void
Registers a click callback for the dropdown options. Whenever one of the options
is clicked, the callback will be called with the value of the option.
@param ― func The callback function.
registerClickCallback((
value: string
value) => {
6
  // `value` will be the value you gave your option in the dropdown wrapper.
7
  
any
console.
any
log(
value: string
value);
8
});
9

10
// You can toggle the dropdown like this:
11
const dropdown: DropdownHelper
dropdown.
DropdownHelper.toggle: () => void
A function to toggle the dropdown.
toggle();
12

13
// Instead of toggling, you can simply show or hide the dropdown:
14
const dropdown: DropdownHelper
dropdown.
DropdownHelper.show: () => void
A function to show the dropdown.
show();
15
const dropdown: DropdownHelper
dropdown.
DropdownHelper.hide: () => void
A function to hide the dropdown.
hide();