You can download a minimized version of the library or get the full source code at github.com.
Download source$ npm install coreui-panelДля корректной работы на странице необходимо наличие: Bootstrap 5, jquery
<div id="panel-simple"></div>
<script>
CoreUI.panel.create({
title: "Component Panel",
subtitle: "CoreUI Framework",
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-simple');
</script>
<div id="panel-inset-components"></div>
<script>
CoreUI.panel.create({
title: "Component Panel",
subtitle: "CoreUI Framework",
content: [
"Your content 1 <br><br>",
{
component: "coreui.panel",
title: "Sub Panel",
content: "Your content 3"
}
]
}).render('panel-inset-components');
</script>
<div id="panel-content"></div>
<script>
CoreUI.panel.create({
title: "Title",
controls: [
{ type: "custom", content: "<div class=\"py-2\"><em>Custom content</em></div>" },
{ type: "link", content: "Link", href: "/link-url", attr: {class: 'btn btn-success'}, onClick: function () { return false } },
{ type: "button", attr: {class: "btn btn-outline-secondary" }, content: "Button", onClick: function () {console.log(1) } },
{ type: "dropdown", content: "Dropdown", attr: { class: 'btn btn-primary' }, position: 'end',
items: [
{ type: 'link', content: 'Link', link: "#" },
{ type: 'button', content: 'Button 1', onClick: function (event, panel) { console.log(2) } },
{ type: 'divider' },
{ type: 'button', content: 'Button 2', onClick: function (event, panel) { console.log(3) } },
]
},
{ type: "button_group", attr: { class: 'btn-group' },
buttons: [
{ type: "link", content: "Link", attr: { class: 'btn btn-secondary' }, link: "#" },
{ type: "button", content: "Button", attr: { class: 'btn btn-secondary' }, onClick: function (event, table) { console.log(4) } },
{ type: "dropdown", content: "Dropdown", attr: { class: 'btn btn-secondary' }, position: 'end',
items: [
{ type: 'link', content: 'Link', link: "#" },
{ type: 'button', content: 'Button 1', onClick: function (event, panel) { console.log(5) } },
{ type: 'divider' },
{ type: 'button', content: 'Button 2', onClick: function (event, panel) { console.log(6) } },
]
},
]
}
],
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-controls');
</script>
<div id="panel-tabs"></div>
<script>
let panelTabs = CoreUI.panel.create({
id: 'tabs',
title: "Component Panel",
subtitle: "CoreUI Framework",
tabs: {
items: [
{ id: "1", title: "Home", active: true },
{ id: "2", title: "Profile" },
{ id: "3", title: "Disabled", disabled: true },
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "4", title: "Tab title 4", disabled: true},
{ id: "5", title: "Tab title 5"},
{ type: "divider"},
{ id: "6", title: "Tab title 6"}
]
}
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
});
panelTabs.render('panel-tabs');
panelTabs.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-pills"></div>
<script>
let panelPills = CoreUI.panel.create({
tabs: {
type: 'pills',
items: [
{ id: "1", title: "Home", active: true },
{ id: "2", title: "Profile"},
{ id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "4", title: "Tab title 4", disabled: true},
{ id: "5", title: "Tab title 5"},
{ type: "divider"},
{ id: "6", title: "Tab title 6"}
]
}
]
},
content: [ "Tab Home" ]
});
panelPills.render('panel-pills');
panelPills.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-underline"></div>
<script>
let panelUnderline = CoreUI.panel.create({
tabs: {
type: 'underline',
items: [
{ id: "1", title: "Home", active: true},
{ id: "2", title: "Profile" },
{ id: "3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "4", title: "Tab title 4", disabled: true},
{ id: "5", title: "Tab title 5" },
{ type: "divider"},
{ id: "6", title: "Tab title 6" }
]
}
]
},
content: [ "Tab Home" ]
});
panelUnderline.render('panel-underline');
panelUnderline.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-fill"></div>
<script>
let panelFill = CoreUI.panel.create({
tabs: {
type: 'tabs',
fill: 'fill',
items: [
{id: "1", title: "Active", active: true},
{id: "2", title: "Much longer nav link"},
{id: "3", title: "Link"},
{id: "3", title: "Disabled", disabled: true},
]
},
content: [ "Tab Home" ]
});
panelFill.render('panel-fill');
panelFill.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-justify"></div>
<script>
let panelJustify = CoreUI.panel.create({
tabs: {
type: 'tabs',
fill: 'justified',
items: [
{id: "1", title: "Active", active: true},
{id: "2", title: "Much longer nav link"},
{id: "3", title: "Link"},
{id: "3", title: "Disabled", disabled: true},
]
},
content: [ "Tab Home" ]
});
panelJustify.render('panel-justify');
panelJustify.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-pos-left"></div>
<script>
let panelLeft = CoreUI.panel.create({
tabs: {
position: 'left',
width: 200,
items: [
{ id: "1", title: "Home", active: true },
{ id: "2", title: "Profile" },
{ id: "3", title: "Disabled", disabled: true },
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "4", title: "Tab title 4", disabled: true },
{ id: "5", title: "Tab title 5" },
{ type: "divider"},
{ id: "6", title: "Tab title 6" }
]
}
]
},
content: [ "Tab Home" ]
});
panelLeft.render('panel-pos-left');
panelLeft.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-pos-right"></div>
<script>
let panelRight = CoreUI.panel.create({
tabs: {
position: 'right',
width: 200,
items: [
{ id: "1", title: "Home", active: true },
{ id: "2", title: "Profile" },
{ id: "3", title: "Disabled", disabled: true },
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "4", title: "Tab title 4", disabled: true},
{ id: "5", title: "Tab title 5" },
{ type: "divider" },
{ id: "6", title: "Tab title 6" }
]
}
]
},
content: [ "Tab Home" ]
});
panelRight.render('panel-pos-right');
panelRight.on('tab_click', function (tab, event) {
this.setContent( tab.getOptions().title );
});
</script>
<div id="panel-ajax"></div>
<script>
let panelAjax = CoreUI.panel.create({
id: "ajax",
title: "Component Panel",
subtitle: "CoreUI Framework",
tabs: {
items: [
{ id: "tab1", title: "Home", active: true, urlContent: "data/tab1.txt" },
{ id: "tab2", title: "Profile", urlContent: "data/tab2.json" },
{ id: "tab3", title: "Disabled", disabled: true},
{
title: "Dropdown",
type: "dropdown",
items: [
{ id: "tab4", title: "Tab title 3", disabled: true},
{ id: "tab5", title: "Tab title 4", urlContent: "data/tab3.json" },
{ type: "divider"},
{ id: "tab6",title: "Tab title 5", urlurlContent: "data/tab4.json"}
]
}
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
});
panelAjax.render('panel-ajax');
panelAjax.on('tab_click', function (tab, event) {
console.log(tab.getId() + ' ' + 'tab_click')
});
panelAjax.on('load_start', function (xhr) {
console.log('load_start')
});
panelAjax.on('load_success', function (result) {
console.log('load_success')
});
panelAjax.on('load_error', function (xhr, textStatus, errorThrown ) {
console.log('load_error')
});
panelAjax.on('load_end', function (xhr) {
console.log('load_end')
});
</script>
<div id="panel-tabs-count"></div>
<script>
CoreUI.panel.create({
tabs: {
items: [
{ id: "tab1", title: "Users", count: 3, active: true },
{ id: "tab2", title: "Issues", count: 18 },
{ id: "tab3", title: "Actions" }
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-tabs-count');
</script>
<div id="panel-tabs-count-load"></div>
<script>
CoreUI.panel.create({
load: "data/tabs.json",
tabs: {
items: [
{ id: "tab1", title: "Tab1", urlCount: "data/count/tab1.json", active: true },
{ id: "tab2", title: "Tab2", urlCount: "data/count/tab2.json" },
{ id: "tab3", title: "Tab3"}
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-tabs-count-load');
</script>
<div id="panel-tabs-badge"></div>
<script>
CoreUI.panel.create({
tabs: {
items: [
{ id: "tab1", title: "Orders", badge: { text: '', type: 'success' }, active: true },
{ id: "tab2", title: "Profile" },
{ id: "tab3", title: "Messages", badge: { text: '99+', type: 'danger', attr: { title: 'Unread messages'} } },
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-tabs-badge');
</script>
<div id="panel-tabs-badge-load"></div>
<script>
CoreUI.panel.create({
tabs: {
items: [
{ id: "tab1", title: "Orders", urlBadge: "data/badges/tab1.json", active: true },
{ id: "tab2", title: "Profile" },
{ id: "tab3", title: "Messages", urlBadge: "data/badges/tab3.json" },
]
},
content: "Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui."
}).render('panel-tabs-badge-load');
</script>
| Name | type | default | description |
|---|---|---|---|
| id | string | crc32b |
Идентификатор панели. Позволяет получать панель для работы с ней, либо для css настроек. Если не указан, то будет равен случайному значению |
| title | string | Заголовок панели | |
| subtitle | string | Подзаголовок панели | |
| controls | string | Элементы управления размещенные на панели | |
| tabs | object |
{
type: 'tabs',
position: 'top-left',
width: 200,
fill: '',
items: []
}
|
Настройки табов панели. type - Внешний вид табов (tabs, pills, underline) position - Расположение табов (top-left, top-center, top-right, left, right) fill - Выравнивание табов (fill, justify) width - Ширина колонки с табами. Может применяться совместно с позиционированием (left, right) items - Список табов. |
| content | string | array | object | Содержимое панели. Может быть в виде строки с html, в виде объекта coreui, либо массива с комбинацией этих объектов | |
| contentUrl | string | Адрес, который будет запрошен сразу же после отображения панели | |
| contentFit | string | Правило для отображения панели относительно ее содержимого. Возможные варианты: fit, min, max | |
| wrapperType | string | card |
Правило для отображения обертки в панели. Возможные варианты: card, none |
| Method | Description |
|---|---|
| let panel = CoreUI.panel.create( options ) | Метод для создания экземпляра панели |
| let panel = CoreUI.panel.get( panelId ) | Получение ранее созданного экземпляра панели |
| panel.render( elementId ) | Формирование html панели и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html |
| panel.initEvents() | Инициализирует события необходимые для корректной работы панели. Требует обязательного вызова, если при рендере панели не был указан элемент для вставки |
| panel.getId() | Получение id панели |
| panel.getOptions() | Получение заданных ранее опций панели |
| panel.setContent(content) | Установка содержимого для панели. Может содержать в себе тоже, что и параметр content в опциях |
| panel.lock(text) | Блокирует работу с панелей и показывает сообщение о загрузке |
| panel.unlock() | Разблокирует работу с панелей |
| panel.loadContent( url ) | Загрузка содержимого для его размещение внутри панели |
| panel.setContent( content ) | Размещение содержимого внутри панели |
| panel.on( name, function, context) | Регистрация функции вызываемой при наступлении указанного события |
| panel.one( name, function, context) | Регистрация функции вызываемой при наступлении указанного события. Выполняется один раз |
| panel.getLang() | Получение переводов текущего языка |
| panel.getTabById( tabId ) | Получение объекта таба по его id |
| panel.getControlById( tabId ) | Получение объекта контрола по его id |
| Event Type | Description |
|---|---|
| panel_show | Показ панели на странице. Происходит один раз при отображении панели |
| content_show |
Показ содержимого внутри панели. Первый раз происходит при показе панели, а после при каждом выполнении метода panel.setContent(content)
|
| tab_click |
Происходит при нажатии на таб. В качестве параметров передаются panel.on('tab_click', function (tab, event)
|
| load_start |
Происходит при загрузке содержимого внутрь панели. В качестве параметров передаются panel.on('load_start', function (xhr)
|
| load_success |
Происходит при успешной ajax загрузке содержимого панели. В качестве параметров передаются panel.on('load_success', function (result)
|
| load_error |
Происходит при НЕ успешной ajax загрузке содержимого панели. В качестве параметров передаются panel.on('load_error', function (xhr, textStatus, errorThrown)
|
| load_end |
Происходит после завершения ajax запроса для получения содержимого для панели.
Дает возможность скрыть прелодер. В качестве параметров передаются panel.on('load_end', function (xhr, textStatus)
|