Guidelines
    Overview
  • Welcome to RamBase Guidelines
  • Applications and components
  • RamBase client overview
    Design guidelines
  • Colors & borders
  • Layout
    • Standard layouts
  • RamBase Application overview
    • Context menu
    • Expanders
    • Splitter
    • Tab controller
    Development guidelines
  • Setup environment
  • Creating applications
    • Creating your first application
    • AppEditor
    • Context menu
  • Creating components
    • Creating your first component
    • Component layout
    • Component data service
    • Keyboard handling
  • APIs
    UI Elements
  • Alertbox
  • Button
  • Checkbox
  • Complex dropdown
  • Date
  • Datetime
  • Dropdown
  • Email
  • Grid
  • Icons
  • Navigate
  • Number
  • Password
  • Popover
  • Popup
  • Progressbar
  • Radiobutton
  • Textarea
  • Textfield
  • Toastr
  • Treeview

Popover window


UI element for presenting popover window

  • Development guideline
  • Design guideline

Example of a typical popover:


Attributes


  • ns-popover-placement: Placement of the popover (top/bottom | left/right)
  • ns-background-faded: Background fade level. Value between 0 and 1.
  • ns-popover-template: Reference to the script template that will be displayed inside the popover
  • ok-action: Ok button with click event
  • cancel-action: Close button with click event
  • disable-ok-action: Disables the ok button if the value if true
  • create-multiple: Display a "create another" checkbox, which if checked prevents closing the popover after clicking the ok button
  • create-multiple-model: Value to set the checkbox state
  • attr-component: Name of the component that will be displayed inside the popover. See seperate section about popover using component template
  • attr-params: The parameters that will be send to the component. See seperate section about popover using component template

Popover using component template


  • A popover must come with / be paired with a triggering button
  • Pressing the escape key should close the popover
  • Pressing the close button should close the popover
  • It should be possible to activate the popover from keyboard only
  • All content and functionality of the popover should be accessible from keyboard only
  • User focus should be placed back on the triggering button when the popover is closed.