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

From Izara Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
= styled-components concept=
= styled-components concept=


===Style Tag Name===
===StyleTag Name Format===


* use "Izara" + html tag + "Style"
* use "Izara" + html tag + "Style"
Line 9: Line 9:
</syntaxhighlight>
</syntaxhighlight>


===Style Tag Syntax===
===StyleTag Syntax===
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
export const IzaraTextSpanStyle = styled.span`
export const IzaraTextSpanStyle = styled.span`
Line 49: Line 49:
*overwritecssstyles(string)
*overwritecssstyles(string)
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===




Revision as of 01:38, 11 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(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.

function process

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