IntegralUI Web

Native Web Components for Angular, React and Vue


IntegralUI TabStrip
Consists of multiple scrollable panels that share the same space
Appearance
  • Customize the appearance of every control part: background, border, tabs and scrollbars
  • Separate look for each tab state: normal, selected, focused, hovered and disabled
  • Opton to show tabs in different colors using custom styles
  • Option to change appearance of each tab separately
  • Color Schemes: Dark and Light
  • Option to create your own Themes
  • Option to change the overall appearance using your own custom settings with conditions
Data
Create or load tabs from custom data sources
  • Data binding between component and custom tab objects
  • Option to load tabs from JSON
  • Add and remove tabs on demand
Drag and Drop
Reorder tabs using drag and drop
  • Change the tab order during run-time
  • Choose whether tabs can be dragged
  • Auto scrolling near component area edges allows you to easily scroll the current view
Events
Control the flow of operations using large number of events
  • Reordering event during drag and drop
  • Tab add/remove events
  • Tab selection events
  • Notification event during update of component layout
  • Scrolling events when scroll position changes
  • Other standard events when component state changes
Layout
Organize each tab header and content in custom layouts
  • Tabs can appear on each side: Top, Right, Bottom or Left
  • Add your own content using custom tab templates
  • Each tab can have its own template or templates can be shared
  • You can change the template content based on custom conditions
  • Option to add other components or custom HTML elements inside the template
  • Each tab can have an icon, text and close button
  • Tabs can be displayed in two modes: AutoSized and Justified
  • Tabs can appear in multiple lines, responsive layout where number of lines changes based on component size
  • Vertical tabs, where content of tab headers is rotated
  • Each tab can have its own context menu or tooltip
  • Show customizable toolbar on left and/or right side when tabs are placed on Top or Bottom side
Scrolling
Manage the appearance and behavior of scrolling buttons
  • Option to show scrolling buttons in different ways: InBound and OutBound
  • Determine whether the component is scrollable
  • Option to scroll to specific tab from code
  • Customize the appareance of scrolling buttons using custom CSS styles
Selection
Manage tab selection in efficient way
  • Two different ways to animate tab content during selection: Fade and Slide
  • Option to select a tab from code
  • Tab selection is accompanied with events
Tooltips
Show customizable tooltips
  • Each tab can have its own tooltip
  • Choose how soon a tolltip will popup, and how long should remain visible