Card Style

  • To get the default value of Card style, navigate to this pathsrc/app/store/setting/state.ts
Card Style
  • Property: "card_color"
  • Choices: "card-default", "card-glass", "card-transparent"

Example

"card_style": { "value": "card-default" },

Changing Card Style Settings

There are two ways to change the card style settings:

1. Using the Live Customizer

You can work on card style using the Live Customizer in two different ways:

a. By Declaring Properties in setting.ts

Example setting.ts

"export const defaultState: SettingDefaultState = {
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": card_style: {
      target: "body",
      choices: ["card-default", "card-glass", "card-transparent"],
      type: "layout_design",
      value: "card-default",
    },
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Replace the copied code into the options object in the setting.ts file.
Before:
"export const initialState: SettingState = {
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-angular",
    "setting":{
        "card_color": { "value": "card-default" },
    }
},
After:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":"card_style": { "value": "card-glass" },
},
1. Manual Configuration

You can change the card style with a single action by adding the appropriate classes to the <body> tag.

Card Style

To change the card style, set the class in body:

  • Card Default:
    • <body class="card-default">
    .......
</nav>
  • Card Glass:
    • <body class="card-glass">
    .......
</nav>
  • Card Transparent:
    • <body class="card-transparent">
    .......
</nav>
Previous Next