Components

@frontpanel/vue wears the @frontpanel/css classes and ships no CSS of its own, so import the stylesheet once (see Getting started). Behaviour and ARIA come from Reka UI. Element components take Reka's as and asChild to render as another element or merge into their child.

The tables are read from each component's types and comments when the site builds.

FpDevice

The device: a molded body in a liquid-chrome rim, on a quiet backdrop. Its modules go in the body. With fit="width" or fit="contain" it draws the device at a design width and scales it to the room it has; the default, fit="none", leaves layout to your page, so its modules reflow at your breakpoints.

Power

Deck · components

PLAY SAVED

88888888TRACK 01

8888STOP

88888888888888CHROME HORIZON

Playlist

1. CHROME HORIZON
2. GEL PRESSURE
3. SILKSCREEN
4. BACKLIGHT
5. TWO BLINKS
6. RIM LIGHT

Icons

FpDevice

Prop	Type	Default	Description
backdrop	boolean	true	Sets the device on the gridded backdrop. Turn it off when the page already provides one.
rim	boolean	true	Rings the body in liquid chrome. Without it the body runs to the edges, as on a phone.
fit	FpDeviceFit	"none"	Scale-to-fit. none leaves layout to the page: the device fills its box and its modules reflow at your breakpoints. width draws the device at its design width and scales it to the width it has; contain scales it to fit both sides, which needs a box with a height of its own.
width	number		The design width in px, rim included, which scale-to-fit needs.
height	number		A fixed design height in px. Without it the device is as tall as its contents.
maxScale	number	1	The largest scale to-fit may reach. 1 keeps the device from growing past its design size.

Event or slot	Description
#default	The content.

FpWindow

A window on the device: a matte module with a chrome title bar. closable adds a close button that emits close; sheet wears the phone bottom sheet from the page extra instead. as renders it as another element, such as an aside, and flush leaves the body unpadded for contents that run edge to edge.

Playlist

1. CHROME HORIZON
2. GEL PRESSURE
3. SILKSCREEN

FpWindow

Prop	Type	Default	Description
title*	string		The window's name, shown in the title bar; it also names the window for assistive tech.
level	2 | 3 | 4 | 5 | 6	2	The title's heading level.
closable	boolean		Adds a close button to the title bar, which emits close. Closing removes the focused button, so move focus back to the control that opened the window.
closeLabel	string		The close button's accessible name. Defaults to "Close" and the title.
sheet	boolean		Wears the phone bottom sheet (fp-sheet-panel, in the opt-in page extra) instead of the module. Position the sheet and choose when to use it yourself; wrap it in <Transition name="fp-sheet">.
flush	boolean		Leaves the body unpadded, for contents that run edge to edge, like a list or a rack of rows.

Event or slot	Description
@close
#default	The content.
#actions	Extra title-bar buttons, set before the close button.

FpButton

A small push button in brushed chrome. Set pressed to make it a toggle: it holds down and sets aria-pressed.

FpButton · takes Reka's as and asChild

Prop	Type	Default	Description
pressed	boolean		Holds the button down and sets aria-pressed, for a toggle. Leave it unset for a plain push button.

Event or slot	Description
#default	The content.

FpGelButton

The glossy gel pill, for the panel's main action. One per panel.

SAVED

FpGelButton · takes Reka's as and asChild

No props of its own.

Event or slot	Description
#default	The content.

FpCap

A molded-plastic cap. Selection shows as pressed in with a ring, never by colour alone.

FpCap · takes Reka's as and asChild

Prop	Type	Default	Description
color	FpCapColor	"white"	The plastic. Each colour carries its own label colour.
pressed	boolean		Holds the cap down with a ring around it and sets aria-pressed. Leave it unset for a plain cap.

Event or slot	Description
#default	The content.

FpKnob

A rotary knob. Drag it up or down (hold Shift for fine moves), or use the arrow keys, PageUp and PageDown, Home and End. v-model holds a number between min and max, snapped to step; valueCommit fires when a drag ends or a key moves it. label puts a silkscreen label under the knob and names it, and valueText says the value in words.

Volume

Tone

VOL 70 TONE -3

<FpKnob v-model="tone" label="Tone" :min="-12" :max="12" :value-text="v => `${v} dB`" />

FpKnob

Prop	Type	Default	Description
min	number	0	The lowest value, at the knob's 7 o'clock stop.
max	number	100	The highest value, at its 5 o'clock stop.
step	number	1	The step values snap to. PageUp and PageDown move ten steps.
label	string		A silkscreen label under the knob, which also names it. Without one, give it an aria-label.
valueText	((value: number) => string)		Turns the value into the words a screen reader says, such as v => ${v} dB``.
disabled	boolean
modelValue	number	0

Event or slot	Description
@update:modelValue
@valueCommit

FpSlider

A fader: a chrome cap that slides along a slot. Drag the cap, press the slot to move it there, or use the arrow keys, PageUp and PageDown, Home and End. It takes the same v-model, label and valueText as FpKnob. It stands up by default; orientation="horizontal" lays it on its side, and --fp-fader-length sets how far it travels.

Bass

Treble

Balance

B 2 T -4 BAL 0

<FpSlider v-model="bass" label="Bass" :min="-12" :max="12" :value-text="v => `${v} dB`" />

FpSlider

Prop	Type	Default	Description
min	number	0	The lowest value, at the bottom (or the start, lying on its side).
max	number	100	The highest value, at the top (or the end).
step	number	1	The step values snap to. PageUp, PageDown and Shift with an arrow move ten steps.
orientation	"vertical" | "horizontal"	"vertical"	Stands up, like a mixer channel, or lies on its side.
label	string		A silkscreen label under the fader, which also names it. Without one, give it an aria-label.
valueText	((value: number) => string)		Turns the value into the words a screen reader says, such as v => ${v} dB``.
disabled	boolean
modelValue	number	0

Event or slot	Description
@update:modelValue
@valueCommit

FpSwitch

An illuminated rocker: press it, or focus it and press Space or Enter, and the I half rocks in as the lamp behind its lens lights; off, the lamp fades out as a filament cools. v-model holds a boolean and label names it. The lamp is red; color lights it green or amber. orientation="horizontal" lays it on its side, O on the left and I on the right, and label-placement="start" puts the label level with it, before it in the line. Only the label goes with it: a switch is always on or off, so show a fault where the device reports one, on its readout or an LED, as the readout here does.

Power

Monitor

Rec

PWR ON MON OFF

<FpSwitch v-model="power" label="Power" />

<FpSwitch v-model="record" label="Rec" orientation="horizontal" label-placement="start" />

FpSwitch

Prop	Type	Default	Description
label	string		A silkscreen label, which also names the switch. Without one, give it an aria-label.
labelPlacement	"below" | "start"	"below"	Where the label sits: under the switch, or level with it and before it in the line.
orientation	"vertical" | "horizontal"	"vertical"	Standing up, I at the top; or on its side, I on the right.
color	FpLedColor	"red"	The colour its lamp lights in.
disabled	boolean
modelValue	boolean	false

Event or slot	Description
@update:modelValue

FpMeter

A level meter: LED segments that light green, then amber from amberAt, then red from redAt. A segment lights once the value reaches it. Pass value; it can change every frame. It stands up by default; orientation="horizontal" lays it on its side, and --fp-meter-length sets how long it is. Name it with label or aria-label, or hide it with aria-hidden when a readout beside it says the same.

Gain

L

R

Input

<FpMeter :value="level" :min="-60" :max="0" :amber-at="-12" :red-at="-3" label="Input" />

FpMeter

Prop	Type	Default	Description
value	number	0	The level to show. Values past the ends light all or none of it.
min	number	0	The level at the bottom (or the start, lying on its side).
max	number	100	The level at the top (or the end).
segments	number	12	How many LED segments it has. A segment lights once the value reaches it.
amberAt	number		Where amber begins, in the value's units. Defaults to 70 percent of the range.
redAt	number		Where red begins, in the value's units. Defaults to 90 percent of the range.
orientation	"vertical" | "horizontal"	"vertical"	Stands up, like a channel's level, or lies on its side.
lens	FpLens		How its segments light. Unset, it takes the lens set around it (fp-lens-*), else diffused.
label	string		A silkscreen label under the meter, which also names it. Without one, give it an aria-label.
valueText	((value: number) => string)		Turns the value into the words a screen reader says, such as v => ${v} dB``.

FpReadout

A seven-segment readout: LED digits in a dark housing, with the unlit segments faintly showing. It draws digits, a minus, a space and the letters such a display can; a . lights the decimal point of the digit before it and a : adds a colon. digits pads it with dark cells on the left, so a changing number keeps its width. Screen readers read the value as text, or the words valueText gives.

2:05-1.5 dBErr

<FpReadout :value="level.toFixed(1)" :digits="4" :value-text="v => `${v} dB`" />

Without Vue, each character is an fp-readout-cell holding an fp-readout-lit with one element per lit segment, named by data-segment; fpReadoutGlyph from @frontpanel/vue gives the segments a character lights. The cell draws the unlit ones itself:

<span class="fp-readout fp-led-amber">
  <span class="fp-readout-text">7</span>
  <span class="fp-readout-cell" aria-hidden="true">
    <span class="fp-readout-lit"><span data-segment="a"></span><span data-segment="b"></span><span data-segment="c"></span></span>
  </span>
</span>

FpReadout

Prop	Type	Default	Description
value*	string | number		What it shows. Digits, a minus, a space and the letters a seven-segment display can draw; a . lights the decimal point of the digit before it, and a : adds a colon.
digits	number		How many digit cells it has, padded with dark cells on the left. Colons do not count.
color	FpLedColor	"green"	The colour its segments light in.
lens	FpLens		How its segments light. Unset, it takes the lens set around it (fp-lens-*), else diffused.
valueText	((value: string) => string)		Turns the value into the words a screen reader says, such as v => ${v} dB``.

FpLcd and FpLcdLine

LCD glass recessed into the chrome, and a line of text on it. ghost shows the unlit segments behind the text, cells wide; redraw sweeps the line left to right when its text changes.

88888888888888CHROME HORIZON

FpLcd · takes Reka's as and asChild

No props of its own.

Event or slot	Description
#default	The content.

FpLcdLine · takes Reka's as and asChild

Prop	Type	Default	Description
text*	string		The text on the glass. Readouts read best in capitals.
ghost	boolean		Shows the unlit segments behind the text, as on real glass.
cells	number		The line's width in character cells, which the ghost segments fill. Defaults to the text's length.
redraw	boolean		Redraws the line left to right whenever its text changes, as a display does.

FpLed

A green, amber or red LED. It is decorative unless given a label: say what it means in text nearby. blink blinks it twice when it lights; re-key it to blink again.

ON REC CLIP OFF

FpLed

Prop	Type	Default	Description
color	FpLedColor	"green"	The colour it lights in.
lit	boolean		Lights the LED, with a glow.
blink	boolean		Blinks twice when it lights, then holds, to confirm an action. Re-key the LED to blink again.
lens	FpLens		How its light spreads. Unset, it takes the lens set around it (fp-lens-*), else diffused.
label	string		Announces the LED as an image with this name. Without it the LED is decorative: say its state in text nearby.

Lenses

A real LED has its chip in the middle of the segment, under a diffusing lens, so it is brightest there. The lens sets how strong that is, for FpLed, FpMeter and FpReadout: fp-lens-diffused, the default, gives a soft hot spot; fp-lens-clear a bright core and a wider glow; fp-lens-flat an even fill. Put a lens class on any element to set every LED part inside it, a whole device at once, or pass a part its own lens.

8.8

FLAT

8.8

DIFFUSED

8.8

CLEAR

<FpDevice class="fp-lens-clear">
  <FpReadout :value="time" />            <!-- clear, from the device -->
  <FpLed lit lens="flat" />              <!-- its own lens -->
</FpDevice>

FpHousing, FpWell, FpSilk and FpScrew

A dark housing for LEDs and small readouts, a recessed well, a silkscreened label and a screw head. Render FpSilk as a heading or label where it names something.

SilkscreenHOUSING

Well

FpHousing · takes Reka's as and asChild

No props of its own.

Event or slot	Description
#default	The content.

FpIcon

A 16 px pixel icon. It is decorative unless given a label; on an icon-only button, put aria-label on the button instead.

addcloseleftrightgoplayundoredohomesavedsettingshelpsavecopytrashgripquickgridmenu

FpIcon

Prop	Type	Default	Description
name*	FpIconName		Which glyph, one of fpIconNames.
label	string		Announces the icon as an image with this name, for an icon that stands alone.