refactor(PageHeader): update actions positioning to display below the title for improved layout and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m55s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m55s
This commit is contained in:
@@ -3,12 +3,12 @@ import React from 'react'
|
|||||||
/**
|
/**
|
||||||
* Единый заголовок страницы в стиле Tabler UI.
|
* Единый заголовок страницы в стиле Tabler UI.
|
||||||
* Используется на всех страницах для одинакового UX.
|
* Используется на всех страницах для одинакового UX.
|
||||||
* Кнопки (actions) отображаются справа от названия страницы.
|
* Кнопки (actions) отображаются под названием страницы.
|
||||||
* @param {string} title - Заголовок страницы
|
* @param {string} title - Заголовок страницы
|
||||||
* @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
|
* @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
|
||||||
* @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
|
* @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
|
||||||
* @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
|
* @param {React.ReactNode} [meta] - Подзаголовок или мета-информация под заголовком
|
||||||
* @param {React.ReactNode} [actions] - Кнопки/действия справа в шапке (btn-list, btn-group)
|
* @param {React.ReactNode} [actions] - Кнопки/действия под названием страницы (btn-list, btn-group)
|
||||||
*/
|
*/
|
||||||
function PageHeader({ title, icon, pretitle, actions, meta }) {
|
function PageHeader({ title, icon, pretitle, actions, meta }) {
|
||||||
return (
|
return (
|
||||||
@@ -26,12 +26,14 @@ function PageHeader({ title, icon, pretitle, actions, meta }) {
|
|||||||
<div className="text-muted small mt-1">{meta}</div>
|
<div className="text-muted small mt-1">{meta}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{actions && (
|
</div>
|
||||||
<div className="col-auto ms-auto d-print-none">
|
{actions && (
|
||||||
|
<div className="row mt-2">
|
||||||
|
<div className="col d-print-none">
|
||||||
{actions}
|
{actions}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user