Difference between revisions of "Virtual Elements"

From PowerUI
Jump to: navigation, search
(→‎The priority value)
 
(8 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
== Accessing virtual elements ==
 
== Accessing virtual elements ==
  
−
There's a web API for doing this - specifically the element.getComputedStyle("after") method, which is supported. The set itself is:
+
There's a web API for doing this which is supported - specifically the [https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle getComputedStyle] method:
  
 +
<syntaxhighlight lang="csharp">
 +
 +
// Get the computed style for the '::after' selector on element:
 +
var after = document.window.getComputedStyle(element,"after");
 +
 +
// (Then use e.g. after.Element)
 +
 +
// Or use the PowerUI convenience version:
 +
var after = element.getComputedStyle("after");
 +
 +
</syntaxhighlight>
 +
 +
For more advanced uses, you can directly access the set of virtual elements here:
  
 
<syntaxhighlight lang="csharp">
 
<syntaxhighlight lang="csharp">
  
 
// Get the virtuals set for 'element' (A HtmlElement):
 
// Get the virtuals set for 'element' (A HtmlElement):
−
Css.VirtualElements virtuals=element.Style.Computed.Virtuals;
+
Css.VirtualElements virtuals=element.RenderData.Virtuals;
 +
 
 +
// Or via ComputedStyle.RenderData.Virtuals
  
 
</syntaxhighlight>
 
</syntaxhighlight>
Line 17: Line 32:
 
== The priority value ==
 
== The priority value ==
  
−
You'll notice that the virtuals set uses those arbitrary priority values. In order to obtain a particular virtual element, you'll need to know what its priority is - fortunately, they're constant for any given type of element:
+
In order to obtain a particular virtual element from the raw virtuals set, you'll need to know what its priority is - fortunately, they're constant for any given type of element:
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 23: Line 38:
 
! Virtual Element
 
! Virtual Element
 
! Priority (C# const)
 
! Priority (C# const)
 +
! See Also
 
|-
 
|-
 
| Horizontal scrollbar
 
| Horizontal scrollbar
 
| ComputedStyle.HorizontalScrollPriority
 
| ComputedStyle.HorizontalScrollPriority
 +
| [[Scrollbars|Styling scrollbars]]
 
|-
 
|-
 
| Vertical scrollbar
 
| Vertical scrollbar
 
| ComputedStyle.VerticalScrollPriority
 
| ComputedStyle.VerticalScrollPriority
 +
| [[Scrollbars|Styling scrollbars]]
 +
|-
 +
| Textarea/ input field caret
 +
| HtmlCaretElement.Priority
 +
| [[Caret|Styling the caret]]
 +
|-
 +
| Select menu dropdown
 +
| HtmlDropdownElement.Priority
 +
| It's a virtual <dropdown> element (style it by selecting that).
 +
|-
 +
| Select menu down arrow
 +
| HtmlSelectButtonElement.Priority
 +
| It's a virtual <selectbutton> element (style it by selecting that).
 
|-
 
|-
 
| ::before
 
| ::before
 
| BeforeSelector.Priority
 
| BeforeSelector.Priority
 +
|
 
|-
 
|-
 
| ::after
 
| ::after
 
| AfterSelector.Priority
 
| AfterSelector.Priority
 +
|
 
|-
 
|-
 
| ::marker
 
| ::marker
 
| MarkerSelector.Priority
 
| MarkerSelector.Priority
 +
|
 
|}
 
|}
 +
 +
For example, let's say you wanted to directly get the automatic vertical scrollbar from an element:
 +
 +
<syntaxhighlight lang="csharp">
 +
 +
var virtuals = element.RenderData.Virtuals;
 +
 +
// Got any virtual elements at all?
 +
if(virtuals != null){
 +
   
 +
    // Yes - try getting the vertical scrollbar:
 +
    var verticalScrollbar = virtuals.Get(ComputedStyle.VerticalScrollPriority);
 +
   
 +
    // Exists?
 +
    if(verticalScrollbar == null){
 +
        // Nope!
 +
    }else{
 +
        // Yes! 'element' has a vertical scrollbar.
 +
    }
 +
 +
}
 +
 +
</syntaxhighlight>
  
 
== What can I do with them? ==
 
== What can I do with them? ==
  
 
They're completely ordinary elements which act exactly the same as a child of the element they're on. Essentially, you can do whatever you can normally do to elements to them too ''(The element itself is accessed from ComputedStyle.Element)''.
 
They're completely ordinary elements which act exactly the same as a child of the element they're on. Essentially, you can do whatever you can normally do to elements to them too ''(The element itself is accessed from ComputedStyle.Element)''.

Latest revision as of 23:40, 3 April 2017

Virtual elements are created whenever CSS requires an element to be rendered but must not pollute the DOM. Importantly, virtual elements are ordered. For example, the virtual element created by ::after shows up after the 'real' element has been drawn. PowerUI handles this by storing all virtual elements in a SortedDictionary, indexed by a priority value. It's unique and constant for any given type of virtual element.

Accessing virtual elements

There's a web API for doing this which is supported - specifically the getComputedStyle method: 

// Get the computed style for the '::after' selector on element:
var after = document.window.getComputedStyle(element,"after");

// (Then use e.g. after.Element)

// Or use the PowerUI convenience version:
var after = element.getComputedStyle("after");

For more advanced uses, you can directly access the set of virtual elements here: 

// Get the virtuals set for 'element' (A HtmlElement):
Css.VirtualElements virtuals=element.RenderData.Virtuals;

// Or via ComputedStyle.RenderData.Virtuals

Note that it's null if there aren't any.

The priority value

In order to obtain a particular virtual element from the raw virtuals set, you'll need to know what its priority is - fortunately, they're constant for any given type of element:

Virtual Element Priority (C# const) See Also
Horizontal scrollbar ComputedStyle.HorizontalScrollPriority Styling scrollbars
Vertical scrollbar ComputedStyle.VerticalScrollPriority Styling scrollbars
Textarea/ input field caret HtmlCaretElement.Priority Styling the caret
Select menu dropdown HtmlDropdownElement.Priority It's a virtual <dropdown> element (style it by selecting that).
Select menu down arrow HtmlSelectButtonElement.Priority It's a virtual <selectbutton> element (style it by selecting that).
 ::before BeforeSelector.Priority
 ::after AfterSelector.Priority
 ::marker MarkerSelector.Priority

For example, let's say you wanted to directly get the automatic vertical scrollbar from an element: 

var virtuals = element.RenderData.Virtuals;

// Got any virtual elements at all?
if(virtuals != null){
    
    // Yes - try getting the vertical scrollbar:
    var verticalScrollbar = virtuals.Get(ComputedStyle.VerticalScrollPriority);
    
    // Exists?
    if(verticalScrollbar == null){
        // Nope!
    }else{
        // Yes! 'element' has a vertical scrollbar.
    }

}

What can I do with them?

They're completely ordinary elements which act exactly the same as a child of the element they're on. Essentially, you can do whatever you can normally do to elements to them too (The element itself is accessed from ComputedStyle.Element).

Retrieved from "https://powerui.kulestar.com/wiki/index.php?title=Virtual_Elements&oldid=378"