Get started

Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

Install with npm

$ npm install coreui-layout

Требования

Для корректной работы на странице необходимо наличие: Bootstrap 5, jquery

Examples

Simple layout


    <div id="layout-items"></div>

    <script>
        let layout = CoreUI.layout.create({
            items: [
                { width: 200, content: "Left" },
                { content: "Center" },
                { width: 150, content: "Right" },
            ]
        });
        layout.render('layout-items');
    </script>

Nested


    <div id="layout-nested"></div>

    <script>
        CoreUI.layout.create({
            items: [
                { width: 200, content: "Left" },
                { content: "Center" },
                { fill: true, content: {
                    component: 'coreui.layout',
                    items: [
                        { width: 200, content: "Left" },
                        { content: "Center" },
                        { width: 150, content: "Right" },
                    ]
                }},
            ]
        }).render('layout-nested');
    </script>

Direction





    <div id="layout-direction-row"></div>
    <div id="layout-direction-row-reverse"></div>
    <div id="layout-direction-column"></div>
    <div id="layout-direction-column-reverse"></div>

    <script>
        let directionItems = [
            { "width": 200, "content": "Left" },
            { "content": "Center" },
            { "width": 150, "content": "Right" },
        ];

        CoreUI.layout.create({ direction: "row",            items: directionItems }).render('layout-direction-row');
        CoreUI.layout.create({ direction: "row-reverse",    items: directionItems }).render('layout-direction-row-reverse');
        CoreUI.layout.create({ direction: "column",         items: directionItems }).render('layout-direction-column');
        CoreUI.layout.create({ direction: "column-reverse", items: directionItems }).render('layout-direction-column-reverse');
    </script>

Justify content







    <div id="layout-justify-start"></div>
    <div id="layout-justify-end"></div>
    <div id="layout-justify-center"></div>
    <div id="layout-justify-between"></div>
    <div id="layout-justify-around"></div>
    <div id="layout-justify-evenly"></div>

    <script>
        let justifyItems = [
            { "width": 200, "content": "Left" },
            { "content": "Center" },
            { "width": 150, "content": "Right" },
        ];

        CoreUI.layout.create({ justify: "start",   items: justifyItems }).render('layout-justify-start');
        CoreUI.layout.create({ justify: "end",     items: justifyItems }).render('layout-justify-end');
        CoreUI.layout.create({ justify: "center",  items: justifyItems }).render('layout-justify-center');
        CoreUI.layout.create({ justify: "between", items: justifyItems }).render('layout-justify-between');
        CoreUI.layout.create({ justify: "around",  items: justifyItems }).render('layout-justify-around');
        CoreUI.layout.create({ justify: "evenly",  items: justifyItems }).render('layout-justify-evenly');
    </script>

Align items






    <div id="layout-align-start"></div>
    <div id="layout-align-end"></div>
    <div id="layout-align-center"></div>
    <div id="layout-align-baseline"></div>
    <div id="layout-align-stretch"></div>

    <script>
        let alignItems = [
            { "width": 200, "content": "Left" },
            { "content": "Center" },
            { "width": 150, "content": "Right" },
        ];

        CoreUI.layout.create({ align: "start",    height: 100, items: alignItems }).render('layout-align-start');
        CoreUI.layout.create({ align: "end",      height: 100, items: alignItems }).render('layout-align-end');
        CoreUI.layout.create({ align: "center",   height: 100, items: alignItems }).render('layout-align-center');
        CoreUI.layout.create({ align: "baseline", height: 100, items: alignItems }).render('layout-align-baseline');
        CoreUI.layout.create({ align: "stretch",  height: 100, items: alignItems }).render('layout-align-stretch');
    </script>

Align self






    <div id="layout-align-self-start"></div>
    <div id="layout-align-self-end"></div>
    <div id="layout-align-self-center"></div>
    <div id="layout-align-self-baseline"></div>
    <div id="layout-align-self-stretch"></div>

    <script>
        CoreUI.layout.create({
            align: "stretch",
            height: 100,
            items: [
                { "content": "Left" },
                { "width": 200, "content": "Center", align: "start" },
                { "width": 100, "content": "Right" },
            ]
        }).render('layout-align-self1');

        CoreUI.layout.create({
            align: "stretch",
            height: 100,
            items: [
                { "content": "Left" },
                { "width": 200, "content": "Center", align: "end" },
                { "width": 100, "content": "Right" },
            ]
        }).render('layout-align-self2');

        CoreUI.layout.create({
            align: "stretch",
            height: 100,
            items: [
                { "content": "Left" },
                { "width": 200, "content": "Center", align: "center"},
                { "width": 100, "content": "Right" },
            ]
        }).render('layout-align-self3');

        CoreUI.layout.create({
            align: "stretch",
            height: 100,
            items: [
                { "content": "Left" },
                { "width": 200, "content": "Center", align: "baseline" },
                { "width": 100, "content": "Right" },
            ]
        }).render('layout-align-self4');

        CoreUI.layout.create({
            align: "stretch",
            height: 100,
            items: [
                { "content": "Left" },
                { "width": 200, "content": "Center", align: "stretch" },
                { "width": 100, "content": "Right" },
            ]
        }).render('layout-align-self5');
    </script>

Fill


    <div id="layout-fill"></div>

    <script>
        CoreUI.layout.create({
            items: [
                { "width": 200, "content": "Left" },
                { "content": "Center", fill: true},
                { "width": 150, "content": "Right" },
            ]
        }).render('layout-fill');
    </script>

Wrap





    <div id="layout-wrap-simple"></div>
    <div id="layout-nowrap"></div>
    <div id="layout-wrap"></div>
    <div id="layout-wrap-reverse"></div>

    <script>
        CoreUI.layout.create({
            wrap: "wrap",
            width: 250,
            items: [
                { "width": 200, "content": "Left" },
                { "content": "Center"},
                { "width": 150, "content": "Right" },
            ]
        }).render('layout-wrap-simple');

        CoreUI.layout.create({
            wrap: "nowrap",
            width: 250,
            items: [
                { "content": "Flex item" },
                { "content": "Flex item" },
                { "content": "Flex item" },
                { "content": "Flex item" },
                { "content": "Flex item" },
                { "content": "Flex item" },
                { "content": "Flex item" },
            ]
        }).render('layout-nowrap');

        CoreUI.layout.create({
            wrap: "wrap",
            items: [
                { "content": "Flex item 1" },
                { "content": "Flex item 2" },
                { "content": "Flex item 3" },
                { "content": "Flex item 4" },
                { "content": "Flex item 5" },
                { "content": "Flex item 6" },
                { "content": "Flex item 7" },
                { "content": "Flex item 8" },
                { "content": "Flex item 9" },
                { "content": "Flex item 10" },
                { "content": "Flex item 11" },
                { "content": "Flex item 12" },
            ]
        }).render('layout-wrap');

        CoreUI.layout.create({
            wrap: "wrap-reverse",
            items: [
                { "content": "Flex item 1" },
                { "content": "Flex item 2" },
                { "content": "Flex item 3" },
                { "content": "Flex item 4" },
                { "content": "Flex item 5" },
                { "content": "Flex item 6" },
                { "content": "Flex item 7" },
                { "content": "Flex item 8" },
                { "content": "Flex item 9" },
                { "content": "Flex item 10" },
                { "content": "Flex item 11" },
                { "content": "Flex item 12" },
            ]
        }).render('layout-wrap-reverse');
    </script>

Order



    <div id="layout-order1"></div>
    <div id="layout-order2"></div>

    <script>
        CoreUI.layout.create({
            items: [
                { order: 3, content: "First flex item" },
                { order: 2, content: "Second flex item" },
                { order: 1, content: "Third flex item" },
            ]
        }).render('layout-order1');

        CoreUI.layout.create({
            items: [
                { order: 1, content: "Flex item 1" },
                { order: 1, content: "Flex item 2" },
                { order: 1, content: "Flex item 3" },
                { order: 0, content: "Flex item 4" },
                { order: 0, content: "Flex item 5" },
                { order: 0, content: "Flex item 6" },
                { order: 2, content: "Flex item 7" },
                { order: 2, content: "Flex item 8" },
                { order: 2, content: "Flex item 9" },
                { order: 2, content: "Flex item 10" },
            ]
        }).render('layout-order2');
    </script>

Size options



    <div id="layout-sizes1"></div>
    <div id="layout-sizes2"></div>

    <script>
        CoreUI.layout.create({
            justify: "start",
            align: "start",
            direction: "row",
            wrap: "wrap",
            items: [
                { "width": 200, "content": "Left" },
                { "content": "Center" },
                { "width": 150, "content": "Right" },
            ],
            sizes: {
                sm: {},
                md: {},
                lg: {},
                xl: {},
                xxl: {
                    direction: "column",
                    justify: "between",
                    align: "start",
                    wrap: "nowrap",
                },
            }
        }).render('layout-sizes1');

        CoreUI.layout.create({
            justify: "start",
            align: "start",
            direction: "row",
            wrap: "wrap",
            items: [
                { order: 1, width: 200, content: "Left" },
                { order: 1, content: "Center" },
                {
                    content: "Right",
                    order: 0,
                    width: 150,
                    sizes: {
                        sm: {},
                        md: {},
                        lg: {},
                        xl: {},
                        xxl: {
                            align: "start",
                            fill: true,
                            order: 2
                        },
                    }
                }
            ]
        }).render('layout-sizes2');
    </script>

Overflow


    <div id="layout-overflow"></div>

    <script>
        CoreUI.layout.create({
            overflow: 'hidden',
            height: 150,
            items: [
                { width: '25%', height: 95, overflow: 'auto',    content: "This is an example of using overflow auto on an element with set width and height dimensions. By design, this content will vertically scroll." },
                { width: '25%', height: 95, overflow: 'hidden',  content: "This is an example of using overflow hidden on an element with set width and height dimensions." },
                { width: '25%', height: 95, overflow: 'visible', content: "This is an example of using overflow visible on an element with set width and height dimensions." },
                { width: '25%', height: 95, overflow: 'scroll',  content: "This is an example of using overflow scroll on an element with set width and height dimensions." },
            ]
        }).render('layout-overflow');
    </script>

All options


    <div id="layout-all"></div>

    <script>
        let layoutAll = CoreUI.layout.create({
            id: "layout-all-id",
            justify: "start",   // start, end, center, between, around, evenly
            align: "start",     // start, end, center, baseline, stretch
            direction: "row",   // column, column-reverse, row, row-reverse
            wrap: "wrap",       // wrap, nowrap, wrap-reverse
            overflow : "auto",  // auto, hidden, visible, scroll
            overflowX : "auto", // auto, hidden, visible, scroll
            overflowY : "auto", // auto, hidden, visible, scroll
            width: 500,
            minWidth: 400,
            maxWidth: 600,
            height: 200,
            minHeight: 100,
            maxHeight: 300,
            gap: 15,
            items: [
                { id: "id-sidebar", content: "Left",   align: "start" },
                { id: "id-content", content: "Center", fill: true },
                {
                    id: "id-right_bar",
                    align: "stretch",
                    content: "Right",
                    order: 0,           // 0 - 5
                    overflow : "auto",  // auto, hidden, visible, scroll
                    overflowX : "auto", // auto, hidden, visible, scroll
                    overflowY : "auto", // auto, hidden, visible, scroll
                    sizes: {
                        sm: {},
                        md: {},
                        lg: {},
                        xl: {},
                        xxl: {
                            align: "end",  // start, end, center, baseline, stretch
                            fill: true,
                            order: 2,
                            widthColumn: 0 // 1 - 12
                        },
                    }
                },
            ],
            sizes: {
                sm: {
                    direction: "row", // column, column-reverse, row, row-reverse
                    justify: "start", // start, end, center, between, around, evenly
                    align: "start",   // start, end, center, baseline, stretch
                    wrap: "wrap",     // wrap, nowrap, wrap-reverse
                },
                md: {},
                lg: {},
                xl: {},
                xxl: {},
            }
        });

        let layoutContent = layoutAll.render();
        $('#layout-all').html(layoutContent);
        layoutAll.initEvents();

        layoutAll.setItemContent('id-sidebar', "Set Item Content");
    </script>

Options layout

Name type default description
id string crc32b Идентификатор макета. По умолчанию равен уникальному значению
justify string start Выравнивание flex-элементов в контейнере по оси X.
Возможные варианты: start, end, center, between, around, evenly
align string start Выравнивание flex-элементов в контейнере по оси Y.
Возможные варианты: start, end, center, baseline, stretch
direction string row Установка направления flex-элементов в контейнере.
Возможные варианты: column, column-reverse, row, row-reverse
wrap string wrap Установка способа переноса flex-элементов в контейнере.
Возможные варианты: wrap, wrap-reverse, nowrap
overflow string auto Установка способа переполнения элементов в контейнере.
Возможные варианты: auto, hidden, visible, scroll
overflowX string auto Установка способа переполнения элементов в контейнере по оси X.
Возможные варианты: auto, hidden, visible, scroll
overflowY string auto Установка способа переполнения элементов в контейнере по оси Y.
Возможные варианты: auto, hidden, visible, scroll
width string|number Ширина контейнера в пикселях или других единицах
minWidth string|number Минимальная ширина контейнера в пикселях или других единицах
maxWidth string|number Максимальная ширина контейнера в пикселях или других единицах
height string|number Высота контейнера в пикселях или других единицах
minHeight string|number Минимальная высота контейнера в пикселях или других единицах
maxHeight string|number Максимальная высота контейнера в пикселях или других единицах
gap string|number Отступ между элементами в пикселях или других единицах
items array Список элементов наполняющих контейнер. Более подробное описание содержимого есть в разделе Options layout item
sizes object Перечень настроек для каждого отдельного размера экрана, которые перекрывают настройки по умолчанию.
Возможные варианты размеров: sm, md, lg, xl, xxl
Возможные варианты настроек: direction, justify, align, wrap

Options layout item

Name type default description
id string crc32b Идентификатор элемента. По умолчанию равен уникальному значению
content string|object Содержимое внутри элемента. Может быть как текст, так и вложенный объект CoreUI
align string Выравнивание flex-элемента в контейнере по оси Y.
Возможные варианты: start, end, center, baseline, stretch
fill bool Элемент с таким признаком будет занимать все доступное горизонтальное пространство
order number Установка визуального порядка для элемента. Возможные варианты: 0, 1, 2, 3, 4, 5
overflow string auto Установка способа переполнения содержимого в элементе.
Возможные варианты: auto, hidden, visible, scroll
overflowX string auto Установка способа переполнения содержимого в элементе по оси X.
Возможные варианты: auto, hidden, visible, scroll
overflowY string auto Установка способа переполнения содержимого в элементе по оси Y.
Возможные варианты: auto, hidden, visible, scroll
width string|number Ширина контейнера в пикселях или других единицах
minWidth string|number Минимальная ширина контейнера в пикселях или других единицах
maxWidth string|number Максимальная ширина контейнера в пикселях или других единицах
height string|number Высота контейнера в пикселях или других единицах
minHeight string|number Минимальная высота контейнера в пикселях или других единицах
maxHeight string|number Максимальная высота контейнера в пикселях или других единицах
sizes object Перечень настроек для каждого отдельного размера экрана, которые перекрывают настройки по умолчанию.
Возможные варианты размеров: sm, md, lg, xl, xxl
Возможные варианты настроек: align, fill, order

Methods

let layout = CoreUI.layout.create( options )

Метод для создания экземпляра макета

let layout = CoreUI.layout.get( id )

Получение ранее созданного экземпляра макета по его id

layout.render( element )

Формирование и размещение макета в указанном dom элементе или указанном id элемента. Если Элемент не указан, то сформированный html будет возвращен в ответе этого метода.

layout.initEvents()

Инициализация событий макета. Нужно выполнять после ручного добавления html макета на страницу

layout.setItemContent(itemId, content)

Установка содержимого внутри какого-либо элемента, указанного по id.

layout.getId()

Получение id у созданного экземпляра

layout.on( eventName, function )

Установка своего обработчика на какое-либо событие

Events

Event Type Description
shown.coreui.layout Показ содержимого макета
show-content.coreui.layout Установка содержимого в каком-либо элементе макета