Developers can customize the Theme variables to style the Toolbar and Panel Header Menu sizes as described below.

• 1. Summary
• 2. Step by Step Guide
• 2.1 Styling Toolbar and Panel Header using Theme variables
• Styling Toolbar button sizes
• Styling Panel Header
• 3. Documentation

1. Summary

Themes allow developers and designer to customise some options of the UI of the platform. This can be used to style the application in a specific way, or adjust the UI for some specific needs, in this example the adjustments explained in this Use Case will be useful for touch-based screens that needs bigger controls.

2. Step by Step Guide

2.1 Styling Toolbar and Panel Header using Theme variables

Styling Toolbar button sizes

To change the size of Toolbar buttons, developers can adjust the button text size.

You'll need to modify the theme.ts file in your theme as follows:

toolbar: {
      grouped: {
        button: { textSize: '...20px' }
      },
      transparent: {
        button: { textSize: '...20px' }
      },
      filled: {
        button: { textSize: '...20px' }
      }
 },

The result can be seen in the screenshot below:

Styling Panel Header

To modify the Panel Header height and Menu Icons size, developers can adjust theme variables in their theme's theme.ts file.

panel: {
  header: {
    height: '...90px',
    buttonFontSize: '...22px'
  }
},

The result can be seen in the screenshot below:

3. Documentation

To find more information, you can check the following documentation.

Themes

Back to Use Cases

Back to Build.One Help-Center Home