2025-04-08 - Frontend Styles: Difference between revisions

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 23: Line 23:
==createComponent==
==createComponent==
===Parameter===
===Parameter===
*themeStyle
*themeStyle(object)
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 40: Line 40:
</syntaxhighlight>
</syntaxhighlight>


*styletags
*styletag(array)
list of use styletag create from createStyleTags function  
list of use styletag create from createStyleTags function  
eg.
eg.
Line 47: Line 47:
</syntaxhighlight>
</syntaxhighlight>


*overwritecssstyles
*overwritecssstyles(string)
object from objectConfig store styletag as key and css as value
Css value obtained from the objectConfig followed by the style tag as a key.
 




Revision as of 01:35, 11 April 2025

styled-components concept

Style Tag Name

  • use "Izara" + html tag + "Style"
  • html tag = same tag with styled.tag
const IzaraInputStyle = styled.input

Style Tag Syntax

export const IzaraTextSpanStyle = styled.span`
  ${(props) => createComponent(props)}
`;


function

createComponent

Parameter

  • themeStyle(object)

object from userStyles get from userDetail in store after login, It store styletag as key and css as value eg. 

themeStyle = {
  styles: {
    "componentXNavbar": "   \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(204, 214, 166);\n        transition: 0.3s;\n        z-index: 5;\n        height: 35px;",
    "navbar": " \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(199, 242, 164);\n        transition: 0.3s;\n        z-index: 5;\n        height: 35px;\n",
    "specificInThisCOmpnonentBuyingNavbar": " \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(223, 232, 204);\n        transition: 0.3s;\n        z-index: 5;\n   35px;\n",
    "tabulation_buyingNavbar_datatype": " \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(223, 232, 204);\n        transition: 0.3s;\n        z-index: 5;\n     height: 35px;\n ",
    "tabulation_buyingNavbar_navbar_datatype": "   \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(204, 214, 166);\n        transition: 0.3s;\n  z-index: 5;\n  height: 35px;",
    "tabulation_datatype": " \n        width: auto;\n        flex-direction: row;\n        padding: 5px;\n        padding-right: 10px;\n        background: rgb(199, 242, 164);\n        transition: 0.3s;\n   z-index: 5;\n   height: 35px;\n"
  }
};
  • styletag(array)

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(string)

Css value obtained from the objectConfig followed by the style tag as a key.

Retrieved from "https://izara.io/wiki/index.php?title=2025-04-08_-_Frontend_Styles&oldid=3089"