Skip to content

Dropdown

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

  • Option 1
  • Option 2

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

  • Option 1
  • Option 2
  • Option 1
  • Option 2
  • Option 1
  • Option 2

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

  • Option 1
  • Option 2

You can disable a dropdown by passing the disabled prop.

DropdownDisabledExample.astro
<Dropdown disabled {/* ... */}>
<!-- ... -->
</Dropdown>

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:

  • Default
  • Primary
  • Success
  • Warning
  • Danger
  • Info
  • Monochrome
  • Disabled
  • As Link

The dropdown items also support icons. You can pass an icon name to the option object:

  • Notifications
  • Settings
  • Profile

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!

Script Tag
import {
class DropdownHelper
DropdownHelper
} from 'studiocms:ui/components/dropdown';
const
const dropdown: DropdownHelper
dropdown
= new
new DropdownHelper(id: string, fullWidth?: boolean): DropdownHelper

A helper function to interact with dropdowns.

@paramid The ID of the dropdown.

@paramfullWidth Whether the dropdown should be full width. Not needed normally.

DropdownHelper
('dropdown');
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.

@paramfunc The callback function.

registerClickCallback
((
value: string
value
) => {
// `value` will be the value you gave your option in the dropdown wrapper.
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err

@seesource

console
.
Console.log(message?: any, ...optionalParams: any[]): void

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.

@sincev0.1.100

log
(
value: string
value
);
});
// You can toggle the dropdown like this:
const dropdown: DropdownHelper
dropdown
.
DropdownHelper.toggle: () => void

A function to toggle the dropdown.

toggle
();
// Instead of toggling, you can simply show or hide the dropdown:
const dropdown: DropdownHelper
dropdown
.
DropdownHelper.show: () => void

A function to show the dropdown.

show
();
const dropdown: DropdownHelper
dropdown
.
DropdownHelper.hide: () => void

A function to hide the dropdown.

hide
();