@!(data, className) @function header(){} @function body(){

# Layout Control

Layout control allows to change wrapper class on button click.

See the Pen jPList Layout Control by 1rosehip (@1rosehip) on CodePen.

## HTML Structure

Layout control is defined by required `data-jplist-control="layout"` data attribute. The `data-class` attribute contains a class name that will be added to the group container on button click:

    <button
            data-jplist-control="layout"
            type="button"
            data-class="jplist-list"
            data-group="group1"
            data-name="name1">List</button>

    <button
            type="button"
            data-jplist-control="layout"
            data-class="jplist-grid"
            data-group="group1"
            data-name="name1"
            data-selected="true">Grid</button>

    <button
            type="button"
            data-jplist-control="layout"
            data-class="jplist-thumb"
            data-group="group1"
            data-name="name1">Thumb</button>

    <!-- content to sort -->
    <div data-jplist-group="group1">

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            ....
        </div>

    </div>

    <!-- jplist library -->
    <script src="jplist.min.js"></script>
    <script>
        jplist.init();
    </script>

## Data Attributes

The full list of control data attributes.

Name | Description | Values
--- | --- | ---
`data-jplist-control` | Defines layout control. | "layout"
`data-group` | Defines group of items that should be influenced. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute. | any text value
`data-class` | Defines a class name that should be added to the group container on button click | CSS class name without the dot
`data-name` | The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value. | any text value
`data-selected` | Defines if a button is selected. | "true" or "false"

} @render(process.cwd() + '/build/site/layouts/documentation.html', data, 'Layout Control', header, body, 'other-controls', 'layout')