Documentation

Vue

Page Appearance

File name:- /src/app/store/setting/state.ts
  1. page_layout
    - for layout of page there are 2 options given below. Values are in string. 
    "page_layout": "container-fluid",
choices: 'container', 'container-fluid'
  2. theme_style_appearance
    - for card apperance there are 4 options given below. Values are in array. 
    "theme_style_appearance": " ["theme-default"],
choices: 'theme-default', 'theme-flat', 'theme-bordered', 'theme-sharp'
  3. theme_transition
    - for animation of page there are 2 options given below. Values are in string. 
    "theme_transition": "theme-with-animation",
choices: 'theme-without-animation', 'theme-with-animation'
  4. card_color
    - for card design there are 3 options given below. Values are in string. 
    "card_color": "card-glass",
choices: 'card-default', 'card-glass', 'card-transparent'

There are two ways you can change the setting of your page:

With the use of live customizer
You can work on page style using Live Customizer in three different ways:
  1. You can change the page style and its appearance with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting":{
        "app_name": { "value" : "Hope UI" },
        "page_layout": {"value" : "container-fluid"},
        "theme_transition": {"value" : "theme-with-animation"},
        "card_color": {"value" : "card-glass"},
        "theme_style_appearance": {"value": []}
    }
},
  2. Go to the live customizer and click on the 'Copy Config' button available at the top-right to copy the json file from the setting panel. Paste the copied code in the IQSetting(setting_options) at the setting-init.js file.
    - Before
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
    - After
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "app_name": {"value": "Hope UI"},
        "page_layout": {"value" : "container-fluid"},
        "theme_transition": {"value" : "theme-with-animation"},
        "card_color": {"value" : "card-glass"},
        "theme_style_appearance": {"value": []}
    }
});
  3. You can change the page style and its appearance by adding property name and its values in the <meta> tag given in <head> section.
    - This is the example of <meta> data 
    <head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting",
        "setting":{
            "app_name":{"value":"Hope UI"},
            "page_layout": {"value" : "container-fluid"},
            "theme_transition": {"value" : "theme-with-animation"},
            "card_color": {"value" : "card-glass"},
            "theme_style_appearance": {"value": []}
        }
    }>
</head>
Manual
You can change the page style and appearance with a single action.
  1. By adding some classes in parent div section. Example is given below.

    2. Page Style

    If you wish to change the page style, you can follow the below action.

    For example you have to set page style as boxed then you will have to add container class at main section.

    - For page style as boxed 
    <main class = "main-content">
    <div class = ".... container">
    .......
    </div>
<main>
    - For page style as full width 
    <main class = "main-content">
    <div class = ".... container-fluid">
        .......
    </div>
<main>

    Page Style Appearance

    If you wish to change the page style appearance, you can follow the below action.

    For example you have to set page style appearance as flat then you will have to add theme-flat class at body tag.

    - For page style appearance as flat 
    <body class=".... theme-flat">
    .......
</body>
    - For page style appearance as bordered 
    <body class=".... theme-bordered">
    .......
</body>;
    - For page style appearance as sharp 
    <body class=".... theme-sharp">
    .......
</body>;

    Page Animation

    If you wish to change the page animation, you can follow the below action.

    For example you have to set page animation as without-animation then you will have to add without-page-animation class at body tag.

    - For page without animation 
    <body class = "..... without-page-animation">
    .......
<body>
    - For page animation 
    <body class = "..... theme-with-animation">
    .......
<body>

    Card Design

    If you wish to change the card design, you can follow the below action.

    For example you have to set card as card-glass then you will have to add card-glass class at body tag.

    - For card as glass effect 
    <body class = "..... card-glass">
    .......
<body>
    - For card as transparent 
    <body class = "..... card-transparent">
    .......
<body>
    - For card as default 
    <body class = "..... card-default">
    .......
<body>
Previous Next