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

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 41: Line 41:


*styletags
*styletags
list of use styletag  
list of use styletag create from createStyleTags function
eg.
<syntaxhighlight lang="JavaScript">
["tabulation_ComplexFilter_filterData_section_dataType_sort","tabulation_ComplexFilter_section_dataType_sort","tabulation_section_dataType_sort"]
</syntaxhighlight>
 
 
 
*overwritecssstyles
*overwritecssstyles


Revision as of 09:12, 9 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 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"
  }
};
  • styletags

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
Retrieved from "https://izara.io/wiki/index.php?title=2025-04-08_-_Frontend_Styles&oldid=3086"