github
DocsBlog
Chapters
fontcolor_theme
Desktop UI

Drag

The directive DragDirective allows to listen to drag gestures on an element. It can be used to implement custom drag and drop functionality, to create resizable elements, or to implement custom drag interactions.

This example uses another directive duiPositionChange which uses observePosition to monitor arbitrary element position and size changes (using efficient IntersectObserver and ResizeObserver).

PreviewHTML TS
Drag Me

API [duiDrag](source)

searchclear

A directive that catches pointer events and emits drag events.

This won't move the element, it just emits events when the user does a drag gesture.

<div (duiDrag)="onDrag($event)" [duiDragThreshold]="2"></div>
Name
Description 
@Input() duiDragAbortOnEscape?: boolean
@Input() duiDragThreshold?: number
@Output() duiDrag?: DuiDragEvent
@Output() duiDragCancel?: number
@Output() duiDragEnd?: DuiDragEvent
@Output() duiDragStart?: DuiDragStartEvent

Splitter

The component dui-splitter is tailored for resizing layouts, such as sidebars or panels.

Use [element] to safely set the [property] of the element. It makes sure that [size] it the real size of the element after drag ended. Use instead or additionally [size] with (sizeChange) to persist and load the size in e.g. localStorage.

PreviewHTML TS
Top Area (100px)
Bottom Area

API <dui-splitter>(source)

searchclear

A splitter component that can be used for layout resizing. With an indicator that shows a handle.

This is typically used to resize layouts such as sidebars, panels, or other UI elements.

Best used in combination with flex-basis CSS property to allow flexible resizing.

<div class="layout">
  <div class="sidebar" [style.flex-basis.px]="sidebarSize()">
      <dui-splitter position="right" [size]="sidebarSize" (sizeChange)="sidebarSize.set($event)" indicator></dui-splitter>
  </div>
  <div class="content"></div>
</div>
Name
Description 
@Input() element?: Element
@Input() horizontal?: boolean
Per default splitter is vertical (movement left-to-right), meaning vertical line. If set to true, it will be horizontal (movement top-to-bottom). 
@Input() indicator?: boolean
When set, the splitter will show an indicator (handle) to indicate that it can be dragged. 
@Input() inverted?: boolean
@Input() max?: number
@Input() min?: number
@Input() orientation?: 'horizontal' | 'vertical'
@Input() position?: 'bottom' | 'top' | 'left' | 'right'
If set one of these, the splitter will be positioned absolutely in the layout. Make sure to set a parent element with `position: relative;` to allow absolute positioning. 
@Input() property?: string
When element is set, this CSS property will be used to set the size of the splitter. Default is 'flex-basis', which is typically used in flexbox layouts. 
@Input() size?: number
@Output() sizeChange?: number
isHorizontal: Signal<boolean>