2025-04-08 - Frontend Styles: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 24: | Line 24: | ||
===Parameter=== | ===Parameter=== | ||
===themeStyle=== | ===themeStyle=== | ||
type object(can be undefined) | *type object(can be undefined) | ||
*object from userStyles get from userDetail in store after login, It store styletag as key and css as value | *object from userStyles get from userDetail in store after login, It store styletag as key and css as value | ||
eg. | eg. | ||
| Line 42: | Line 42: | ||
===styletags=== | ===styletags=== | ||
type array(can be undefined) | *type array(can be undefined) | ||
*list of use styletag create from createStyleTags function | *list of use styletag create from createStyleTags function | ||
eg. | eg. | ||
| Line 50: | Line 50: | ||
===overwritecssstyles=== | ===overwritecssstyles=== | ||
type string(can be undefined) | *type string(can be undefined) | ||
Css value obtained from the objectConfig followed by the style tag as a key. | *Css value obtained from the objectConfig followed by the style tag as a key. | ||
===function process=== | ===function process=== | ||
| Line 58: | Line 58: | ||
*create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles | *create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles | ||
===return result=== | ===return result=== | ||
type string | *type string | ||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
color: blue; | color: blue; | ||
| Line 79: | Line 79: | ||
===Parameter=== | ===Parameter=== | ||
===createCssPrefixs=== | ===createCssPrefixs=== | ||
type array(requried) | *type array(requried) | ||
*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item | *List of string create by createCssPrefixs function store at least 1 item but not more than 3 item | ||
===createCssSuffix=== | ===createCssSuffix=== | ||
type string(requried) | *type string(requried) | ||
*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table. | *A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table. | ||
Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range. | Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range. | ||
===return result=== | ===return result=== | ||
type array | *type array | ||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"] | ["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"] | ||
| Line 111: | Line 111: | ||
===Parameter=== | ===Parameter=== | ||
===defaultSuffix=== | ===defaultSuffix=== | ||
type string(requried) | *type string(requried) | ||
*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables. | *Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables. | ||
===localSuffix=== | ===localSuffix=== | ||
type string(can be undefined) | *type string(can be undefined) | ||
*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2" | *Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2" | ||
===return result=== | ===return result=== | ||
type string | *type string | ||
<syntaxhighlight lang="JavaScript"> | <syntaxhighlight lang="JavaScript"> | ||
//if not have localSuffix | //if not have localSuffix | ||
Revision as of 02:28, 17 April 2025
styled-components concept
StyleTag Name Format
- use "Izara" + html tag + "Style"
- html tag = same tag with styled.tag
const IzaraInputStyle = styled.input
StyleTag Syntax
export const IzaraTextSpanStyle = styled.span`
${(props) => createComponent(props)}
`;
function
createComponent
Parameter
themeStyle
- type object(can be undefined)
- object from userStyles get from userDetail in store after login, It store styletag as key and css as value
eg.
themeStyle = {
styles: {
"componentXNavbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
"navbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;",
"specificInThisCOmpnonentBuyingNavbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; 35px;",
"tabulation_buyingNavbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; height: 35px;",
"tabulation_buyingNavbar_navbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
"tabulation_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;"
}
};
styletags
- type array(can be undefined)
- list of use styletag create from createStyleTags function
eg.
["tabulation_ComplexFilter_filterData_section_dataType_sort","tabulation_ComplexFilter_section_dataType_sort","tabulation_section_dataType_sort"]
overwritecssstyles
- type string(can be undefined)
- Css value obtained from the objectConfig followed by the style tag as a key.
function process
- use styleTags to get CssStyle from themeStyle and themeStylesDefault
- themeStylesDefault is object from local create by dev,It store styletag as key and css as value like themeStyle object
- create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles
return result
- type string
color: blue;
margin: 0px 3px;
background-color: transparent;
transition: 0.3s;
font-size: 17px;
display: flex;
align-items: center;
:hover{
opacity: 0.6;
color: #B3DBD8 ;
}
color: red;
- About CSS, if the same property exists, such as in the CSS example above, with two color properties, the CSS will cause the bottom line property to overwrite the top line property. In the example, red overwrites blue.
createStyleTags
Parameter
createCssPrefixs
- type array(requried)
- List of string create by createCssPrefixs function store at least 1 item but not more than 3 item
createCssSuffix
- type string(requried)
- A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
return result
- type array
["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"]
createCssPrefixs
Parameter
defaultPrefix
type string(requried) Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.
cssPrefixes
type array(can be undefined)
- List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.
return result
type array
//if not have cssPrefixes
["tableConfig"]
//have cssPrefixes
["tableConfig", "serviceTag", "objectType"]
createCssSuffix
Parameter
defaultSuffix
- type string(requried)
- Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.
localSuffix
- type string(can be undefined)
- Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"
return result
- type string
//if not have localSuffix
"row"
//have localSuffix
"row_rowSpan_2"