Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

KendoReact StackLayout Overview

The KendoReact StackLayout component allows you to easily align vertically or horizontally multiple elements in a stack.

It delivers different orientations, alignments, spacings and other handy options.


The following example demonstrates the StackLayout component in action and also showcases other KendoReact componentsthe ButtonGroup, Avatars and Cards components. The components are arranged in a stack and can be switched from horizontal to vertical orientation.

Example
View Source
Change Theme:

The StackLayout is part of the KendoReact Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the StackLayout and the rest of the components in the package, see the Getting Started with the KendoReact Layout Package guide.

Key Features

  • OrientationThe orientation configuration option allows you to choose between the vertical and horizontal positioning.
  • GapsThe Gap property allows you to set gaps between the boxes.
  • Horizontal alignmentYou can align the StackLayout horizontally.
  • Vertical alignmentYou can align the StackLayout vertically.
  • Nested StackLayoutsYou can create complex layouts with nested boxes.

In this article

Not finding the help you need?