...
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%5D%2C%22titleAlignment%22%3A%22left%22%2C%22contentAlignment%22%3A%22left%22%2C%22title%22%3A%22%22%2C%22titleColor%22%3A%22%23000000%22%2C%22titleContainerColor%22%3A%22%23ffffff%22%2C%22background%22%3A%22%23ffffff%22%2C%22borderColor%22%3A%22%23cccccc%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22solid%22%2C%22icon%22%3A%22%22%7D |
---|
|
This is how the default panel looks like. |
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%22title%22%2C%22icon%22%5D%2C%22titleAlignment%22%3A%22left%22%2C%22contentAlignment%22%3A%22left%22%2C%22title%22%3A%22Title%22%2C%22titleColor%22%3A%22%23000000%22%2C%22titleContainerColor%22%3A%22%23ffffff%22%2C%22background%22%3A%22%23ffffff%22%2C%22borderColor%22%3A%22%23cccccc%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22solid%22%2C%22icon%22%3A%22%22%7D |
---|
|
This is a panel with enabled title area & icon. |
Alignment
Title: Aligns the title (and icon) either left, centered, or right.
Content: Aligns the text within the panel either left, centered, or right.
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%22title%22%2C%22icon%22%5D%2C%22titleAlignment%22%3A%22right%22%2C%22contentAlignment%22%3A%22center%22%2C%22title%22%3A%22Title%22%2C%22titleColor%22%3A%22%23000000%22%2C%22titleContainerColor%22%3A%22%23ffffff%22%2C%22background%22%3A%22%23ffffff%22%2C%22borderColor%22%3A%22%23cccccc%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22solid%22%2C%22icon%22%3A%22%22%7D |
---|
|
This is a panel with enabled title area & icon. Notice the position of the title and this text. |
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%22title%22%2C%22icon%22%5D%2C%22titleAlignment%22%3A%22left%22%2C%22contentAlignment%22%3A%22center%22%2C%22title%22%3A%22Title%22%2C%22titleColor%22%3A%22%23000000%22%2C%22titleContainerColor%22%3A%22%23ffffff%22%2C%22background%22%3A%22%23ffffff%22%2C%22borderColor%22%3A%22%23cccccc%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22dashed%22%2C%22icon%22%3A%22fas%2Ffeather-alt%22%7D |
---|
|
In this panel we used the dashed border line. |
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%22title%22%2C%22icon%22%5D%2C%22titleAlignment%22%3A%22left%22%2C%22contentAlignment%22%3A%22center%22%2C%22title%22%3A%22Title%22%2C%22titleColor%22%3A%22%23ffffff%22%2C%22titleContainerColor%22%3A%22%23c0b6f2%22%2C%22background%22%3A%22%23ffffff%22%2C%22borderColor%22%3A%22%23cccccc%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22dashed%22%2C%22icon%22%3A%22fas%2Ffeather-alt%22%7D |
---|
|
You can style the title area incl. title text and icon individually. |
Cp panel macro |
---|
data | %7B%22components%22%3A%5B%22title%22%2C%22icon%22%5D%2C%22titleAlignment%22%3A%22left%22%2C%22contentAlignment%22%3A%22left%22%2C%22title%22%3A%22Let's%20see%20come%20colors!%22%2C%22titleColor%22%3A%22%23ffffff%22%2C%22titleContainerColor%22%3A%22%23c0b6f2%22%2C%22background%22%3A%22%23b3f5ff%22%2C%22borderColor%22%3A%22%23ff4310%22%2C%22borderRadius%22%3A4%2C%22borderType%22%3A%22solid3x%22%2C%22icon%22%3A%22fas%2Fpaint-brush%22%7D |
---|
|
If you like it more colorful you can always define the color of the content area. The border line can also be styled individually. |
After configuring the Panel as you please click Save.
...