Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Elements

    • Title: Adds a title area above the panel.

    • Icon: Adds an icon within the title area.

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.

  • Border

    • Styles: Choose between different border styles, eg. dashed or bold.

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.

  • Color

    • Title

      • Background: Choose the background color of the title area.

      • Text & Icon: Choose the color of the title text and the icon next to it.

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.

  • Panel

    • Content area: Choose the background color of the are your text is displayed in.

    • Border: Choose the color of the 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%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.

...