Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
      • Overview
      • AppBar
      • Avatar
      • BottomNavigation
      • Breadcrumb
      • Card
      • Drawer
      • GridLayout
      • Menu
      • PanelBar
      • Splitter
      • StackLayout
      • Stepper
      • TabStrip
      • TileLayout
      • GlobalizationAPI
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

StackLayout

Represents the KendoReact StackLayout component. Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.


const App = () => {
  return (
    <StackLayout
      orientation="vertical"
      align={{horizontal: 'stretch', vertical: 'stretch'}}
      gap={10}
    >
      <div>Box</div>
      <div>Box</div>
      <div>Box</div>
      <div>Box</div>
    </StackLayout>
  );
};
   ReactDOM.render(<App />, document.querySelector('my-app'));

In this article

Not finding the help you need?