# ej2-react-layouts

The layout package contains cards, avatars, splitter and Dashboard Layout components. 

* The `card` is a small container in which user can show defined content in specific structure. 

* The `avatars` are icons, initials or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters.

* The `splitter` is container component which used to construct different layouts using multiple and nested panes.

* The `DashboardLayout` is a grid structured layout component that helps to create a dashboard with panels. Panels hold the UI components and allow resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.

![Layout](https://ej2.syncfusion.com/products/images/layout/readme.png)

> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_campaign=layout) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_campaign=layout).

> A free [community license](https://www.syncfusion.com/products/communitylicense/?utm_source=npm&utm_campaign=layout) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

## Setup

To install `Layout components` and its dependent packages, use the following command.

```sh
npm install @syncfusion/ej2-react-layouts
```

## Components included

Following list of components are available in the package

* Card - Container used to display content in specific structure.
  * [Getting Started](https://ej2.syncfusion.com/react/documentation/card/getting-started/?utm_source=npm&utm_campaign=layout)
  * [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=card#/material/card/basic)
  * [Product Page](https://www.syncfusion.com/react-ui-components/card/?utm_source=npm&utm_campaign=layout)

* Avatar - Used to add images or initials or icons in different shapes and sizes to your application.
  * [Getting Started](https://ej2.syncfusion.com/react/documentation/avatar/getting-started/?utm_source=npm&utm_campaign=layout)
  * [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/default)
  * [Product Page](https://www.syncfusion.com/react-ui-components/avatar/?utm_source=npm&utm_campaign=layout)

* Splitter - Used to construct a different layout using its multiple and nested panes with resizable.
  * [Getting Started](https://ej2.syncfusion.com/react/documentation/splitter/getting-started/?utm_source=npm&utm_campaign=layout)
  * [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/default)
  * [Product Page](https://www.syncfusion.com/react-ui-components/splitter/?utm_source=npm&utm_campaign=layout)

* Dashboard Layout - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
  * [Getting Started](https://ej2.syncfusion.com/react/documentation/dashboard-layout/getting-started/?utm_source=npm&utm_campaign=layout)
  * [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboardlayout/default.html)
  * [Product Page](https://www.syncfusion.com/react-ui-controls/dashboard-layout/?utm_source=npm&utm_campaign=layout)

## Supported Frameworks

These components are available in following list of:

1.	[Angular](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/layouts/?utm_source=npm&utm_campaign=layout)
2.	[React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/layouts/?utm_source=npm&utm_campaign=layout)
3.	[Vue](https://github.com/syncfusion/ej2-vue-ui-components/tree/master/components/layouts/?utm_source=npm&utm_campaign=layout)
4.	[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/?utm_source=npm&utm_campaign=layout)
5.	[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/?utm_source=npm&utm_campaign=layout)
6.	[JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/?utm_source=npm&utm_campaign=layout)

## Use Case samples

* IT Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/?utm_source=npm&utm_campaign=layout))
* Swipeable Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=card#/material/card/swipeable.html))
* Flip Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=card#/material/card/flip.html))
* Tile View ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=card#/material/card/tile.html))
* Contact Application ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/listview.html))
* Avatar Badge ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/badge.html))
* Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/card.html))
* SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboard-layout/analytics-dashboard.html))

## Key Features

* Card
  * [Header](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=card#/material/card/basic) - Header supports to include title, subtitle along with image.

  * [Images and Title](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=card#/material/card/reveal) - Support to include images with customizable caption positions in it.

  * [Action Buttons](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=card#/material/card/vertical) - Supports to add buttons within the card either in vertical or horizontal alignment.

  * [Horizontal Card](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=card#/material/card/horizontal) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.

* Avatar
  * [Types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/default) - Provided `2` types of avatars such as `default` and `circle`.

  * [Sizes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=avatar#/material/avatar/types) - Supports `7` different sizes to adapt the various application scenario.

        * xsmall
        * small
        * medium (default)
        * large
        * xlarge

* Splitter
  * [Multiple Panes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/default) - Provided an option to configure more than two panes.

  * [Resizable Panes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/code-editor-layout) - Supports resizable to adjust its pane size dynamically.

  * [Orientation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/default) - The panes can orient either `horizontally` or `vertically`.

  * [Integration](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/accordion-navigation-menu) - Other React UI components can be integrated within panes.

  * [Nested Panes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=splitter#/material/splitter/code-editor-layout) - Another splitter can be integrated within panes to create a complex layout.

* Dashboard Layout
 
   * [Drag and Drop](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboard-layout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.

   * [Floating](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboard-layout/properties.html) - Floats the panels upward when the dragging option is enabled.

   * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboard-layout/properties.html) - Support to resize the panels in any direction as per the requirement.

   * [MediaQuery](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=dashboard-layout#/material/dashboard-layout/default.html) - Allows the panels to be stacked when the specified resolution is met.

## Support

Product support is available for through following mediums.

* Creating incident in Syncfusion [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/?utm_source=npm&utm_campaign=layout) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2/?utm_source=npm&utm_campaign=layout).
* New [GitHub issue](https://github.com/syncfusion/ej2-react-ui-components/issues/new/?utm_source=npm&utm_campaign=layout).
* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=layout) with tag `syncfusion` and `ej2`.

## License

Check the license detail [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license/?utm_source=npm&utm_campaign=layout).

## Changelog

Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/layouts/CHANGELOG.md/?utm_source=npm&utm_campaign=layout)

© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.