KendoReact Layout Overview

The KendoReact Layout components enable you to create a perceptive and intuitive layout of web projects and provide an easier navigation.

The KendoReact Layout components are part of the KendoReact library which provides native Kendo UI components for the React ecosystem and are available under the kendo-react-layout NPM package.

The Layout package is part of KendoReact, a professionally built commercial UI library. To try out this package you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the Layout components in action.

<style>
    .k-drawer-container {
        width: 100%;
        height: 100%;
    }
</style>
const items = [
  { text: 'Inbox', icon: 'k-i-inbox', selected: true },
  { separator: true },
  { text: 'Notifications', icon: 'k-i-bell' },
  { text: 'Calendar', icon: 'k-i-calendar' },
  { separator: true },
  { text: 'Attachments', icon: 'k-i-hyperlink-email' },
  { text: 'Favorites', icon: 'k-i-star-outline' }
];

const stepperItems = [
  { label: 'Account Info', icon: 'k-i-lock' },
  { label: 'Personal Info', icon: 'k-i-user' },
  { label: 'Payment Details', icon: 'k-i-track-changes', optional: true }
];

class App extends React.Component {
    state = {
      tabSelected: 0,
      expanded: true,
      selectedId: items.findIndex(x => x.selected === true)
    };

    handleTabSelect = (e) => {
      this.setState({tabSelected: e.selected});
    }
    handleClick = () => {
      this.setState(prevState => ({expanded: !prevState.expanded }));
    }
    handleSelect = (e) => {
      this.setState({selectedId: e.selected});
      this.setState({expanded: false});
    }
    render() {
        return (
          <Drawer
              expanded={this.state.expanded}
              mode="overlay"
              position="start"
              items={items.map(
                (item, index) => ({ ...item, selected: index === this.state.selectedId }))}
              onOverlayClick={this.handleClick}
              onSelect={this.handleSelect}
          >
            <DrawerContent>
              <div className="example-wrapper container-fluid">
                <div className="row">
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>TabStrip</p>
                    <TabStrip selected={this.state.tabSelected} onSelect={this.handleTabSelect}>
                        <TabStripTab title="Baseball" >
                            <p>
                              Baseball is a bat-and-ball game played between two teams of nine players each, who take turns batting and fielding.
                            </p>
                            <p>
                              The batting team attempts to score runs by hitting a ball that is thrown by the pitcher with a bat swung by the batter, then running counter-clockwise around a series of four bases: first, second, third, and home plate. A run is scored when a player advances around the bases and returns to home plate.
                            </p>
                        </TabStripTab>
                        <TabStripTab title="Basketball">
                            <p>
                              Basketball is a sport that is played by two teams of five players on a rectangular court. The objective is to shoot a ball through a hoop 18 inches (46 cm) in diameter and mounted at a height of 10 feet (3.048 m) to backboards at each end of the court. The game was invented in 1891 by Dr. James Naismith, who would be the first basketball coach of the Kansas Jayhawks, one of the most successful programs in the game's history.
                            </p>
                        </TabStripTab>
                        <TabStripTab title="Football">
                            <p>
                              Football is a family of team sports that involve, to varying degrees, kicking a ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of football is the most popular in the regional context in which the word appears.
                            </p>
                        </TabStripTab>
                    </TabStrip>
                  </div>
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>PanelBar</p>
                    <PanelBar>
                      <PanelBarItem title="Invasion Games">
                        <PanelBarItem title="Hockey"></PanelBarItem>
                        <PanelBarItem title="Soccer"></PanelBarItem>
                        <PanelBarItem title="Rugby"></PanelBarItem>
                      </PanelBarItem>
                      <PanelBarItem title="Net & Court Games" expanded="true">
                        <PanelBarItem title="Badminton"></PanelBarItem>
                        <PanelBarItem title="Squash"></PanelBarItem>
                        <PanelBarItem title="Tennis" selected={true}></PanelBarItem>
                        <PanelBarItem title="Table Tennis"></PanelBarItem>
                        <PanelBarItem title="Volleyball"></PanelBarItem>
                      </PanelBarItem>
                      <PanelBarItem title="Target Games">
                        <PanelBarItem title="Golf"></PanelBarItem>
                        <PanelBarItem title="Lawn bowls"></PanelBarItem>
                        <PanelBarItem title="Tenpin bowling"></PanelBarItem>
                      </PanelBarItem>
                    </PanelBar>
                  </div>
                  <div className="col-xs-12 example-col">
                    <p>Menu</p>
                    <Menu>
                      <MenuItem text="Invasion Games">
                        <MenuItem text="Hockey" />
                        <MenuItem text="Soccer" />
                        <MenuItem text="Rugby" />
                      </MenuItem>
                      <MenuItem text="Net & Court Games">
                        <MenuItem text="Badminton" />
                        <MenuItem text="Squash" />
                        <MenuItem text="Tennis" />
                        <MenuItem text="Table Tennis" />
                        <MenuItem text="Volleyball" />
                      </MenuItem>
                      <MenuItem text="Target Games">
                        <MenuItem text="Golf" />
                        <MenuItem text="Lawn bowls" />
                        <MenuItem text="Tenpin bowling" />
                      </MenuItem>
                    </Menu>
                  </div>
                  <div className="col-xs-12 example-col">
                    <p>Card</p>
                    <Card style={{width: 300}}>
                      <CardImage src={"https://demos.telerik.com/kendo-ui/content/web/cards/barcelona.jpg"}/>
                      <CardHeader>
                        <CardTitle>
                          Barcelona
                        </CardTitle>
                      </CardHeader>
                      <CardBody>
                      <p>Barcelona, the cosmopolitan capital of Spain's Catalonia region, is known for its art and architecture.</p>
                      <p>The fantastical Sagrada Família church and other modernist landmarks designed by Antoni Gaudí dot the city.</p>
                      </CardBody>
                      <CardActions>
                        <span><span className="k-button k-flat k-primary">Map</span></span>
                        <span><span className="k-button k-flat k-primary">Weather</span></span>
                      </CardActions>
                    </Card>
                  </div>
                  <div className="col-xs-12 col-sm-6 example-col">
                    <p>Drawer</p>
                    <button className="k-button" onClick={this.handleClick}>Toggle Drawer state</button>
                  </div>
                  <div className="col-xs-12 example-col">
                    <p>Avatar</p>
                    <Avatar type="initials" shape="circle" style={{ width: 100, height: 100 }}><span>KR</span></Avatar>
                  </div>
                  <div className="col-xs-12 example-col">
                    <p>Stepper</p>
                    <Stepper items={stepperItems} value={1}/>
                  </div>
                </div>
              </div>
            </DrawerContent>
          </Drawer>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Installation

  1. Download and install the package. Use Node.js v5.0.0 or later.

    npm install --save @progress/kendo-react-layout @progress/kendo-react-progressbars
  2. Once installed, import the package module.

    // ES2015 module syntax
    import { Avatar, Card, Drawer, Menu, PanelBar, Splitter, Stepper, TabStrip } from '@progress/kendo-react-layout';
    // CommonJS format
    const { Avatar, Card, Drawer, Menu, PanelBar, Splitter, Stepper, TabStrip } = require('@progress/kendo-react-layout');
  3. You are required to install one of the Kendo UI themes to style your components. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The Layout package requires you to install the following peer dependencies in your application:

  • react 16.8.2*
  • react-dom
  • @progress/kendo-react-progressbars

The Layout package is part of KendoReact, a professionally built commercial UI library. To try out this package you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.