Advanced Configuration
The app name value is of text type and can be configured as follows:
App Name
- Property: "app_name"
- Value: "Hope UI"
Example
"app_name": { "value": "Hope UI" },
To use the app name in the project add the below given line to the location you want to show the app name
Note: Make sure to add the
attribute
data-setting="app_name"
to the associated element.
The page layout values are of strings type and can be configured as follows:
Page Layout
- Property: "page_layout"
- Choices: "container", "container-fluid"
Example
"page_layout": { "value" : "container-fluid" }
The style appearance values are of array of strings type and can be configured as follows:
Style Appearacne
- Property: "theme_style_appearance"
- Choices: "theme-default", "theme-flat", "theme-bordered", "theme-sharp"
Example
"theme_style_appearance": { "value" : [theme-default] }
The page transition values are of strings type and can be configured as follows:
Page Transition
- Property: "theme_transition"
- Choices: "theme-without-animation", "theme-with-animation"
Example
"theme_transition": { "value" : "theme-with-animation" }
Changing page layout Settings
There are two ways to change the advanced appearance settings:
1. Using the Live Customizer
You can work on page layout using the Live Customizer in two different ways:
a. By Declaring Properties in gulp.config.json
Example gulp.config.json:
"export const defaultState: SettingDefaultState = {
"saveLocal": "sessionStorage",
"storeKey": "huisetting-angular",
"setting":{
app_name: { target: '[data-setting="app_name"]',
choices: [], type: "text", value: "Hope UI", },
}
},
b. By Copying Configuration from the Live Customizer
- Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
- Replace the copied code into the options object in the gulp.config.json file.
Before:
"export const defaultState: SettingDefaultState = {
"saveLocal": "sessionStorage",
"storeKey": "huisetting",
"setting":{
"app_name": { "value": "Hope UI" },
"heading_font_family": { "value": "null" },
"page_layout": { "value": "container-fluid" },
"theme_style_appearance": { "value": [] },
"theme_transition": { "value": "theme-with-animation" },
}
},
After:
"export const initialState: SettingState = {
"saveLocal": "sessionStorage",
"storeKey": "huisetting",
"setting":{
"app_name": { "value": "name_of_your_app" },
"heading_font_family": { "value": "null" },
"page_layout": { "value": "container-fluid" },
"theme_style_appearance": { "value": [] },
"theme_transition": { "value": "theme-with-animation" },
}
},
1. Manual Configuration
You can change the advanced appearance style with a single action by adding the appropriate class to
the appropriate element
.
Page Layout
To change the page Layout, set the class in div with id page_layout:
- Boxed:
- Full Width:
<div id="page_layout" class="container">
.......
</div>
<div id="page_layout" class="container-fluid">
.......
</div>
Style Appearacne
To change the style appearance, set the class in body tag:
- Flat:
- Bordered:
- Sharp:
<body class="theme-flat">
.......
</body>
<body class="theme-bordered">
.......
</body>
<body class="theme-sharp">
.......
</body>
Page Transition
To change the page transition, set the class in body tag:
- With Animation:
- Without Animation:
<body class="theme-with-animation">
.......
</body>
<body class="theme-without-animation">
.......
</body>