Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

What's the correct approach to customize toolbar component?


How to properly customize buttons and actions in the toolbar component, inside our fresh created /pages components? I could not find nothing related to this in the docs...

The toolbar component

<div

[ngClass]="toolbarContainerCssClasses"
class="d-flex flex-stack"
>
<app-page-title
#ktPageTitle
class="page-title d-flex"
[ngClass]="pageTitleCssClasses"
></app-page-title>
<!-- begin::Actions -->
<div class="d-flex align-items-center py-1">
<!-- begin::Wrapper -->
<div class="me-4">
<!-- begin::Menu -->
<a
class="
btn btn-sm btn-flex btn-light btn-active-primary
fw-bolder
cursor-pointer
"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
>
<span
[inlineSVG]=""./assets/media/icons/duotune/general/gen031.svg""
class="svg-icon svg-icon-5 svg-icon-gray-500 me-1"
></span>
Filter
</a>

<!-- end::Menu -->
</div>
<!-- end::Wrapper -->

<!-- begin::Button -->
<a
class="btn btn-sm btn-primary cursor-pointer"
data-bs-toggle="modal"
data-bs-target="#kt_modal_create_app"

>
Create
</a>
<!-- end::Button -->
</div>
<!-- end::Actions -->
</div>


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi,

You can change props of toolbar ui in the src/app/_metronic/layout/core/default-layout.config.ts file. (Don't forget clear your localstorage first).

Regards,
Keenthemes support



A wonderful solution was provided! Modifying the toolbar UI properties directly in default-layout.config.ts shows the right approach. Clearing local storage afterward proves crucial for viewing those changes immediately.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(