• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting

Kendo UI for Vue Native StackLayout Overview

The Kendo UI for Vue Native 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 StackLayout Component is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the StackLayout component in action and also showcases other Kendo UI for Vue Native components—the 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 Layout package part of the Kendo UI for Vue Native suite. 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 Kendo UI for Vue Native Layout Package guide.

Key Features

  • Orientation—The orientation configuration option allows you to choose between the vertical and horizontal positioning.
  • Gaps—The Gap property allows you to set gaps between the boxes.
  • Horizontal alignment—You can align the StackLayout horizontally.
  • Vertical alignment—You can align the StackLayout vertically.
  • Nested StackLayouts—You can create complex layouts with nested boxes.

In this article

Not finding the help you need?