@progress/kendo-layout-react-wrapper
Version:
Kendo UI Layout wrapper for React
162 lines (139 loc) • 5.69 kB
Markdown
---
title: Overview
page_title: Layout Overview - Components - Kendo UI Wrappers for React
description: "Learn about the Kendo UI wrappers for React which are delivered by the Layout package."
slug: overview_layout
position: 0
---
# Layout Overview
The Layout components create a perceptive and intuitive layout of web projects to provide for an easier navigation.
<div class="row components-overview-list mt-70 mb-50 pb-50 separator-bottom">
<a href="{% slug overview_menu %}" class="col-md-4">
<svg id="menu" viewBox="0 0 24 24">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-5.1381" y1="58.1737" x2="75.1381" y2="11.8263">
<stop offset="0" style="stop-color:#FF9B5E"/>
<stop offset="8.618834e-02" style="stop-color:#FF8C5D"/>
<stop offset="0.1949" style="stop-color:#FF7F5B"/>
<stop offset="0.3" style="stop-color:#FF7B5B"/>
<stop offset="0.7" style="stop-color:#FF6358"/>
<stop offset="0.7835" style="stop-color:#FC5F59"/>
<stop offset="0.8701" style="stop-color:#F4525E"/>
<stop offset="0.9577" style="stop-color:#E63E65"/>
<stop offset="1" style="stop-color:#DD3169"/>
</linearGradient>
</defs>
<path d="M69,6H21v6h42L69,6z M21,30h42l6-6H21V30z M21,48h42l6-6H21V48z M21,66h42l6-6H21V66z M3,3h12v12H3V3z M3,21h12v12H3V21z M3,39h12v12H3V39z M3,57h12v12H3V57z"></path>
</svg>
<div class="h4 mt-10 mb-5">Menu</div>
<p>A component for displaying hierarchical data as a multi-level menu.</p>
</a>
<a href="{% slug overview_panelbar %}" class="col-md-4">
<svg id="panelbar" viewBox="0 0 72 72">
<path d="M26,12V0h-6H0v3v3v60v6h6h48l12-12V18v-6h-6H26z M60,57.5L51.5,66H6V6h14v6v6h6h34V57.5z M12,36h36l6-6H12V36zM52,0h14v6H52V0z M12,48h24l6-6H12V48z M32,0h14v6H32V0z"></path>
</svg>
<div class="h4 mt-10 mb-5">PanelBar</div>
<p>A multi-level component for hierarchical data.</p>
</a>
<a href="{% slug overview_tabstrip %}" class="col-md-4">
<svg id="tabstrip" viewBox="0 0 72 72">
<path d="M26,12V0h-6H0v3v3v60v6h6h48l12-12V18v-6h-6H26z M60,57.5L51.5,66H6V6h14v6v6h6h34V57.5z M12,36h36l6-6H12V36z M52,0h14v62V0z M12,48h24l6-6H12V48z M32,0h14v6H32V0z"></path>
</svg>
<div class="h4 mt-10 mb-5">TabStrip</div>
<p>A tab collection for associated content.</p>
</a>
</div>
## Basic Usage
The following example demonstrates the Menu, PanelBar, and TabStrip components in action.
{% meta height:360 %}
```jsx-preview
class LayoutsContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = new kendo.data.HierarchicalDataSource({
data: props.data
});
}
render() {
return (
<div className="example-wrapper">
<p> PanelBar </p>
<PanelBar
dataTextField= {['CategoryName', 'ProductName']}
dataSource={this.dataSource}
/>
<p> Menu </p>
<Menu scrollable={true}>
<MenuItem>Item 1</MenuItem>
<MenuItem>Item 2</MenuItem>
<MenuItem>
Item 4
<SubMenu>
<MenuItem>Item 4 1</MenuItem>
<MenuItem>
Item 4 2
<SubMenu>
<MenuItem>Item 4 2 1</MenuItem>
<MenuItem>Item 4 2 2</MenuItem>
</SubMenu>
</MenuItem>
</SubMenu>
</MenuItem>
</Menu>
<p> TabStrip </p>
<TabStrip value="Paris">
<Tabs>
<Tab>Paris</Tab>
<Tab>New York</Tab>
<Tab>London</Tab>
</Tabs>
<Content>
<h6>17<span>ºC</span> and rainy.</h6>
</Content>
<Content>
<h6>29<span>ºC</span> and sunny.</h6>
</Content>
<Content>
<h6>21<span>ºC</span> and cloudy.</h6>
</Content>
</TabStrip>
</div>
);
}
}
ReactDOM.render(
<LayoutsContainer data={
[{
CategoryName: 'Tea',
items: [{ ProductName: 'Green Tea' },{ ProductName: 'Black Tea' }]
},{
CategoryName: 'Coffee',
items: [{ ProductName: 'Espresso' },{ ProductName: 'Latte' },{ ProductName: 'Cappuccino' }]
}]
} />,
document.querySelector('my-app')
);
```
{% endmeta %}
## Installation
All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, import only the used component from the package.
1. Download and install the package.
```sh
npm install --save @progress/kendo-layout-react-wrapper
```
2. Once installed, import the desired component from the package.
```sh
import { Menu } from '@progress/kendo-layout-react-wrapper';
```
The package also exports the following individual components:
* Menu
* PanelBar
* TabStrip
3. You are required to install one of the Kendo UI themes to style your components.
## Dependencies
The Layout package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
* @progress/kendo-ui
## Suggested Links
* [Get Started with the Menu]({% slug overview_menu %})
* [Get Started with the Panelbar]({% slug overview_panelbar %})
* [Get Started with the TabStrip]({% slug overview_tabstrip %})