BRAMS

Control System 04 / Interface library

Präzision
im Betrieb.

44 ruhige Module für Stationen, Kanäle und Systemzustände. Vanilla CSS, zugängliches JavaScript und kein Produktions-Build.

01 / Runtime0 Abhängigkeiten
02 / Modules44 Schnittstellen
03 / InputPointer + key
04 / MotionReduced motion

System

Gemeinsame Komponentensprache

44 Module folgen einer Sprache aus klaren Zuständen, verlässlicher Interaktion und technischer Präzision.

  1. 01Grundlagen08
  2. 02Formulare13
  3. 03Navigation06
  4. 04Feedback12
  5. 05Daten05

Component index / 44

Komponentenfinder

Name, Nummer, ID, STATE, INPUT oder API. Mit / direkt öffnen.

01 / Foundations

Grundlagen & Aktionen

01—08
01

Card

Gruppiert Inhalt, Status und Aktionen.

.brams-card
Modul 07

Station Nord · vor 2 Min. synchronisiert

Aktiv
02

Divider

Trennt Inhalte horizontal oder vertikal.

.brams-divider
Allgemein
Sicherheit
AB
03

Badge

Kompakte Labels und Zähler.

.brams-badge
NeutralFreigegebenPrüfenBlockiertNeu
04

Status

Kommuniziert laufende Systemzustände.

.brams-status
OfflineOnlineWartungStörung
05

Avatar

Kanäle und Stationen als Initialen.

.brams-avatar
KAKBSN
KAKB+3
06

Button

Klare Hierarchie für Handlungen.

.brams-button
07

Icon Button

Kompakte Aktion mit zugänglichem Namen.

.brams-icon-button
08

Button Group

Verwandte Aktionen kompakt gruppiert.

.brams-button-group

02 / Input

Formulare

09—21
09

Form Field

Label, Hilfe und Fehler als Einheit.

.brams-field
10

Text Input

Text in Standard-, Readonly- und Disabled-Zustand.

.brams-input
11

Search Field

Suche mit lokalem Löschen.

.brams-search
12

Password Field

Passwort sichtbar schalten, ohne Wertverlust.

.brams-password
13

Textarea

Mehrzeilige Eingabe mit Größenänderung.

.brams-textarea
14

Select

Native Auswahl mit Systemstyling.

.brams-select
15

Checkbox

Mehrfachauswahl, gemischt und deaktiviert.

.brams-checkbox
16

Radio Group

Genau eine Option aus einer Gruppe.

.brams-radio-group
Synchronisierung
17

Switch

Unmittelbar wirksame Ein/Aus-Einstellung.

.brams-switch
Fernzugriff Verbindung von außerhalb zulassen.
Gesperrte Funktion
18

Segmented Control

Kompakte, exklusive Ansichtsauswahl.

.brams-segmented
19

Range

Kontinuierlicher Wert mit Live-Ausgabe.

.brams-range
20

Number Stepper

Präzise Zahleneingabe mit Schrittweite.

.brams-number
21

File Upload / Dropzone

Lokale Dateiauswahl ohne Netzwerkübertragung.

.brams-file

    04 / Response

    Feedback & Overlays

    28—39
    28

    Alert

    Persistente, kontextnahe Rückmeldung.

    .brams-alert

    Software-Update verfügbar

    Version 2.4 kann nach Abschluss der Messung installiert werden.

    29

    Toast

    Temporäre, zugängliche Systemmeldung.

    Brams.toast()
    30

    Tooltip

    Kurzhilfe für Maus und Tastatur.

    .brams-tooltip
    31

    Popover

    Fokussierbarer Zusatzinhalt am Auslöser.

    Brams.open()
    32

    Dropdown Menu

    Aktionsmenü mit vollständigem Tastenmodell.

    .brams-menu
    33

    Accordion

    Vertikale Offenlegung mit nativen ARIA-Beziehungen.

    .brams-accordion

    Es verbleibt lokal in Control System 04.

    34

    Progress Bar

    Bestimmter und unbestimmter Fortschritt.

    .brams-progress
    Übertragung68 %
    Verbindung wird geprüft
    35

    Spinner

    Aktivität bei unbekannter Dauer.

    .brams-spinner
    36

    Skeleton

    Wahrt Layout während des Ladens.

    .brams-skeleton
    37

    Modal Dialog

    Fokusfalle, Escape, Backdrop und Wiederherstellung.

    .brams-dialog
    38

    Drawer

    Seitliches Overlay für sekundäre Aufgaben.

    .brams-drawer
    39

    Empty State

    Erklärt leeren Zustand und nächsten Schritt.

    .brams-empty

    Noch keine Kanaldaten

    Aktiviere ein Modul oder importiere ein lokales Protokoll für die erste Signalreihe.

    05 / Information

    Daten & Inhalte

    40—44
    40

    Data Table

    Responsive Datentabelle mit clientseitiger Sortierung.

    .brams-table
    Status der Module in Control System 04
    StatusAktualisiert
    Modul 07Aktiv64 %10:42
    Modul 02Prüfen42 %10:39
    Modul 11Aktiv78 %10:37
    41

    KPI / Stat

    Kennzahl, Kontext und Trend.

    .brams-stat
    Aktive Module12812 % im Kanal
    Fehlerrate0,4 %0,2 Punkte
    42

    List Group

    Strukturierte Inhaltszeilen mit markiertem aktuellem Eintrag.

    .brams-list
    • Aktuelle Station: Station Nord8 ModuleOnline
    • Station West4 ModuleWartung
    • Servicekanal0 ModuleLeer
    43

    Description List

    Schlüssel-Wert-Daten mit Semantik.

    .brams-description-list
    Modell
    Systemmodul B7
    Seriennummer
    BR-2048-07
    Firmware
    2.4.1
    Kalibriert
    01.07.2026
    44

    Timeline

    Chronologische Ereignisse und Zustände.

    .brams-timeline

    1. Konfiguration gespeichert

      Systemroutine 04 hat Pegel und Kanalstatus aktualisiert.

    2. Kalibrierung fällig

      Modul 07 wurde zuletzt vor 12 Tagen kalibriert.

    3. Modul verbunden

    06 / Public API

    JavaScript API

    v1.1.0
    Brams.init(root)
    Idempotente Initialisierung für dynamisches Markup.
    Brams.open(target)
    Öffnet Dialog, Drawer oder Popover.
    Brams.close(target)
    Schließt das Ziel und stellt den Fokus wieder her.
    Brams.toast(options)
    Erzeugt eine Live-Region-Meldung und gibt ihr Element zurück.

    07 / Material & Service

    Material & Service

    Studie 07