Difference between revisions of "Custom CSS Property"

Revision as of 19:48, 12 March 2017

Custom CSS properties can be a great way to reuse functionality and extend PowerUI. They're designed to be simple to make, so simple copy and pasting skills or basic coding skills can be all that's required. Let's get started!

A basic property

The most basic CSS property (A C# file) looks like this:

using PowerUI;
using Css;

// hello-world
public class HelloWorld: CssProperty{
    
    public override string[] GetProperties(){
    
        // One or more names (sometimes prefixed) that your property handles:
        return new string[]{"hello-world"};
        
    }
    
}

At the very least, you must:

• Inherit from an appropriate type of element (it'll almost always be HtmlElement that you use)
• Give it a tag name
• Give it a class name, which is typically of the form HtmlTagNameElement

Place it somewhere outside the PowerUI folders. This is just incase you update PowerUI, as you won't want to loose your changes. It can go anywhere you find appropriate.

Knowing when the computed value of your property changed

Whenever a CSS property is recomputed, it fires the Apply method:

public override ApplyState Apply(ComputedStyle style,Value value){
    
    // This property has changed on the given computed style!
    // Properties that render things add or remove a Renderer to the renderable data.
    // Take a look at the background-color property for example.
    
    // Unless you're caching the value as something else, 
    // you'll almost always just return Ok:
    return ApplyState.Ok;
}

Finding built-in properties

Currently there are 3 major groups of CSS properties in PowerUI:

• Core - Path/To/PowerUI/Spark/Properties
• SVG extensions - Path/To/PowerUI/Source/SVG/Css Properties
• MathML extensions - Path/To/PowerUI/Source/Extras/MathML/Css Properties

Checking your property is available

An easy sanity check is to make sure your new property is being correctly detected by PowerUI. To do that:

• Go to Window > PowerUI > Supported CSS
• Look for e.g. your-property-name

If PowerUI is successfully detecting your property, it will be visible on this list.