mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-27 08:27:23 +00:00
48f1a9f1df
* revamp quickstart guide and add topics to ToolJet concepts * add new guides using floik * add new items to tooljet concepts * update writing custom code concept * make UI enhancements and update the getting started guide * update tooljet concepts and add new topics * merge with dev and misc enhancements * create render * enhance formatting in access values concept * updates to quickstart guide and concepts * fix proofreading errords and update docs * revert versions and doc settings * add platform overview page and fix issues with floik demo sizing * add padding to badges and update workflows screenshot * add latest docs to the previous version * remove versions to preview on render * remove old getting started guide from next and 2.25 * add homepage slug
30 lines
2 KiB
Markdown
30 lines
2 KiB
Markdown
---
|
|
id: styling-components
|
|
title: Styling Components
|
|
---
|
|
|
|
<div style={{marginLeft: "40px", marginRight: "40px"}}>
|
|
|
|
|
|
Styling components in ToolJet is a straightforward yet powerful way to enhance the visual appeal and usability of your application. Once you've dragged and dropped a component onto the canvas in the App-Builder, you can access its styling options through the configuration panel on the right side.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{padding: '10px', marginBottom:'15px'}} className="screenshot-full" src="/img/tooljet-concepts/styling-components/styles-tab.png" alt="Styles Tab" />
|
|
</div>
|
|
|
|
The Styles tab on this panel allows you to modify various visual properties such as colors, fonts, borders, and dimensions. You can also apply conditional styling based on data or user interactions, enabling you to create a more dynamic and responsive user interface.
|
|
|
|
## Intuitive Styling Options
|
|
The styling options in ToolJet are designed to be intuitive, eliminating the need for extensive CSS or design experience. You can easily change the background color of a button, adjust the font size of a text field, or add padding and margins to layout components. These styling changes are immediately reflected on the canvas, providing real-time feedback as you build your application.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{padding: '10px', marginBottom:'15px'}} className="screenshot-full" src="/img/tooljet-concepts/styling-components/styling-options.gif" alt="Styling Options" />
|
|
</div>
|
|
|
|
## Custom CSS
|
|
Beyond basic styling, ToolJet also offers advanced customization capabilities. For users who are comfortable with CSS, there's the option to add custom classes. This opens up endless possibilities for fine-tuning the appearance and behavior of your application. Whether you're aiming for a specific brand aesthetic or need to meet particular accessibility standards, ToolJet's styling options give you the flexibility to create an application that not only functions well but also looks great.
|
|
|
|
</div>
|
|
|
|
|
|
|