css - mkol/il2js GitHub Wiki
Allows setting CSS properties to DOM elements at both server and client side.
private class CssCss : StyleSheet {
public override IEnumerable<Rule> GetRules() {
return new[]{
// * selector
Selector.Universal <= new Style { Color = Color.Red },
// DIV selector
Selector.Type<Division>() <= new Style { BackgroundColor = Color.Black },
// DIV.class1 selector
Selector.Type<Division>() * "class1" <= new Style { TextDecoration = TextDecoration.Underline },
};
}
}
// CSS rules returned by CssCss.GetRules will be added as static .css file to this page.
[Import(typeof(CssCss))]
protected void Page_Load() {
}
/* It wil generate equivalent of this CSS file (but with removed whitespaces, and other tricks to save space).
* {
color: red;
}
div {
background-color: black;
}
div.class1 {
text-decoration: underline;
}
*/
protected void Page_Load() {
this.Document.Body.Add(
new Division {
InnerHTML = "click me",
// this style will be set at client-side after element is created
Style = {
BackgroundColor = Color.Green,
Cursor = Cursor.Pointer
},
// style will be changed at client-side after element is clicked
OnClick = e => {
if (state) {
e.Element.Style.BackgroundColor = Color.FromArgb(0xff);
state = false;
} else {
e.Element.Style.BackgroundColor = Color.FromArgb(0x00, 0xff, 0x00);
state = true;
}
},
},
new Division {
InnerHTML = "don't click me",
Style = new Style {
BackgroundColor = Color.Green,
Cursor = Cursor.Pointer
},
}
);
}
The following syntax can be used at both client-side and server-side (see static server-side page rendering dom):
new Division {
Style = new Style {
BackgroundColor = Color.Green,
Cursor = Cursor.Pointer
}
}
On the other hand the following syntax can be used only at client side:
new Division {
Style = {
BackgroundColor = Color.Green,
Cursor = Cursor.Pointer
}
}