UI components · Overlays · new in 0.7

SpDropdownMenu

Commands with shortcuts, separators, labels and a danger item; on_select(key). Group: Overlays · new in silverpoint 0.7, in React, Vue, Angular and Reflex (sp_dropdown_menu).

Code

The same example in each framework; pick one once and every example on the site follows it.

tsx

import { SpDropdownMenu } from '@silverpoint/react/ui/dropdown-menu';

const actions = [
  { type: 'label', key: 'drawing', label: 'Drawing' },
  { key: 'duplicate', label: 'Duplicate', shortcut: '⌘D' },
  { key: 'export', label: 'Export SVG', shortcut: '⌘E' },
  { type: 'separator', key: 'sep' },
  { key: 'delete', label: 'Delete', danger: true },
] as const;

// label names the menu and is the built-in button's text; trigger={…} replaces that button
<SpDropdownMenu label="Actions" items={actions} onSelect={(key) => console.log(key)} />

vue

<script setup lang="ts">
import { SpDropdownMenu } from '@silverpoint/vue/ui/dropdown-menu';

const actions = [
  { type: 'label', key: 'drawing', label: 'Drawing' },
  { key: 'duplicate', label: 'Duplicate', shortcut: '⌘D' },
  { key: 'export', label: 'Export SVG', shortcut: '⌘E' },
  { type: 'separator', key: 'sep' },
  { key: 'delete', label: 'Delete', danger: true },
] as const;
const run = (key: string) => console.log(key);
</script>

<template>
  <SpDropdownMenu label="Actions" :items="actions" @select="run" />
</template>

import { Component } from '@angular/core';
import { SpDropdownMenu } from '@silverpoint/angular/ui/dropdown-menu';

@Component({
  selector: 'app-actions',
  imports: [SpDropdownMenu],
  template: `<sp-dropdown-menu label="Actions" [items]="actions" (select)="run($event)" />`,
})
export class Actions {
  protected readonly actions = [
    { type: 'label', key: 'drawing', label: 'Drawing' },
    { key: 'duplicate', label: 'Duplicate', shortcut: '⌘D' },
    { key: 'export', label: 'Export SVG', shortcut: '⌘E' },
    { type: 'separator', key: 'sep' },
    { key: 'delete', label: 'Delete', danger: true },
  ] as const;

  protected run(key: string) {
    console.log(key);
  }
}

python

sp_dropdown_menu(
    "Actions",
    [
        {"type": "label", "label": "Drawing"},
        {"key": "duplicate", "label": "Duplicate", "shortcut": "⌘D"},
        {"key": "export", "label": "Export SVG", "shortcut": "⌘E"},
        {"type": "separator"},
        {"key": "delete", "label": "Delete", "danger": True},
    ],
    on_select=State.run,  # receives the item's key
)

Import

Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you. Every adapter also exports it from the ui barrel.

Framework	Import
React	`import { SpDropdownMenu } from '@silverpoint/react/ui/dropdown-menu';`
Vue	`import { SpDropdownMenu } from '@silverpoint/vue/ui/dropdown-menu';`
Angular	`import { SpDropdownMenu } from '@silverpoint/angular/ui/dropdown-menu';` · `sp-dropdown-menu`
Reflex	`from reflex_silverpoint_react import sp_dropdown_menu`

Events, values and slots

Each framework's own way. A change carries the new value itself (a key, a page, a number, a bool), never a DOM event.

	React	Vue	Angular	Reflex
Item chosen	`onSelect(key)`	`@select`	`(select)`	`on_select`
Trigger	`trigger= (else a built-in button named label)`	`#trigger slot`	`a projected spTrigger`	`the first argument`
Open state	`open + onOpenChange, or defaultOpen`	`v-model:open, or default-open`	`[(open)], or [defaultOpen]`	`open + on_open_change, or default_open`

Props

React / Angular	Vue	Type	Description
`items` required	`items`	`readonly MenuEntry[]`	Items, separators and labels, in order. Keys are unique.
`label` required	`label`	`string`	The menu's accessible name and the trigger's text when no trigger slot.
`side`	`side`	`'top' \| 'end' \| 'bottom' \| 'start'`	Default `'bottom'`.
`align`	`align`	`'start' \| 'center' \| 'end'`	Default `'start'`.

In Reflex the names are snake_case; the Reflex column of Composed components shows the builder's arguments.

Common props

Every UI component also takes these, falling back to the dashboard it sits in, then to the provider. In Reflex they read silverpoint_provider too; only sp_trigger does not: pass them to it.

React / Angular	Vue	Reflex	Type	Description
`id`	`id`	`id`	`str`	The frame variant and every related id derive from it.
`ground`	`ground`	`ground`	`Literal['silverpoint', 'cyanotype'] \| str \| dict[str, Any]`	Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint.
`substrate`	`substrate`	`substrate`	`Literal['cream', 'green', 'blue', 'ochre', 'prussian']`	Prepared substrate within the ground.
`mode`	`mode`	`mode`	`Literal['ink', 'precision']`	ink by default; precision disables inking.
`seed`	`seed`	`seed`	`str \| int`	Seed of the frame's hand; overrides id for the frame variant only.
`size`	`size`	`size`	`Literal['sm', 'md', 'lg']`	Control size: sm, md (default) or lg.
`palette`	`palette`	`palette`	`dict[str, str]`	Colours over the ground's (set with palette=), merged over the dashboard's and the provider's.
`className`	`class-name`	`class_name`	`str`	Added to the component's root element, after its own classes.
`palette`	`palette`	`palette`	`Palette`	Colours over the ground's, merged over the dashboard's and the provider's.

Report it

Found something wrong with SpDropdownMenu? Open an issue on GitHub — the form comes pre-filled with the component and the version.