refactor(PageHeader): update actions positioning and layout for improved visibility 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,11 +3,12 @@ import React from 'react'
|
||||
/**
|
||||
* Единый заголовок страницы в стиле Tabler UI.
|
||||
* Используется на всех страницах для одинакового UX.
|
||||
* Кнопки (actions) отображаются под названием страницы.
|
||||
* @param {string} title - Заголовок страницы
|
||||
* @param {React.ReactNode} [icon] - Иконка слева от заголовка (например, <IconServer />)
|
||||
* @param {string} [pretitle] - Небольшая надпись над заголовком (page-pretitle)
|
||||
* @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 }) {
|
||||
return (
|
||||
@@ -25,12 +26,14 @@ function PageHeader({ title, icon, pretitle, actions, meta }) {
|
||||
<div className="text-muted small mt-1">{meta}</div>
|
||||
)}
|
||||
</div>
|
||||
{actions && (
|
||||
<div className="col-auto ms-auto d-print-none">
|
||||
</div>
|
||||
{actions && (
|
||||
<div className="row mt-2">
|
||||
<div className="col d-print-none">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user