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

PopUp window


UI element for presenting popup windows

  • Development guideline
  • Design guideline

Example of a typical popup:


Attributes


  • ng-model: Used for opening and closing the popup
  • k-modal: Default value is true. Fades the background and prevents click events outside the popup
  • k-on-close: Event triggered on closing the popup
  • k-title: Title of the popup
  • k-height: Height of the popup. Ex. k-height="50%"
  • k-width: Width of the popup. Ex. k-width="50%"
  • component: Name of the component that will be displayed inside the popoup. See seperate secion about popups using content components
  • params: Parameters that will be passed to the popup component. See seperate secion about popups using content components

Popup window using component template


A popup should have a minimum and maximum width defined to prevent it from being presented as either too narrow or too wide. Maximum width should not exceed 50% of the viewport.

There should be calculated space enough in top and bottom to account for the height of the close button (X).

If for some reason the content in a popup is so excessive that it can not be fitted into a modal of maximum height and width, then the content in the popup should scroll. Not the actual pop-up.

The popup should have a descriptive header for the ation/message in question. Read design guidelines for labels on buttons for info regarding this.