Difference between revisions of "Scrollbars"
(→Internal DOM Structure) |
|||
| Line 16: | Line 16: | ||
== Using a custom scrollbar - the scrollbar element == | == Using a custom scrollbar - the scrollbar element == | ||
| + | Normally you would use overflow:scroll or overflow:auto to get them to appear, but if you'd like a custom scrollbar to do whatever you want with, then here's some examples: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| Line 77: | Line 78: | ||
The scrollbars act like direct parents of the element which is overflowing. | The scrollbars act like direct parents of the element which is overflowing. | ||
| + | |||
| + | == Thumb and button attributes == | ||
| + | |||
| + | Both the buttons and the thumb automatically set some additional attributes which can be used with the attribute CSS selector. | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! Attribute name | ||
| + | ! Optional | ||
| + | ! What it's for | ||
| + | ! Default value | ||
| + | ! Possible values | ||
| + | |- | ||
| + | | part | ||
| + | | no | ||
| + | | Start or end of the scrollbar | ||
| + | | ''none'' | ||
| + | | start, end | ||
| + | |- | ||
| + | | orient | ||
| + | | no | ||
| + | | Orientation of the button | ||
| + | | ''none'' | ||
| + | | up, down, left, right | ||
| + | |} | ||
== Styling examples == | == Styling examples == | ||
| Line 113: | Line 139: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 15:47, 31 January 2017
PowerUI scrollbars, like all other UI components, are entirely defined in HTML and are easy to style. They consist of these three components:
<!-- The element itself (you can actually use this directly too; see more below) -->
<scrollbar>
<!-- The draggable thumb -->
<scrollthumb>
<!-- The up/down/left/right buttons -->
<scrollbutton>Contents
Using a custom scrollbar - the scrollbar element
Normally you would use overflow:scroll or overflow:auto to get them to appear, but if you'd like a custom scrollbar to do whatever you want with, then here's some examples:
<!-- A vertical scrollbar -->
<scrollbar target='elementID' orient='vertical'/>
<!-- A horizontal scrollbar -->
<scrollbar target='elementID' orient='horizontal'/>| Attribute name | Optional | What it's for | Default value | Possible values |
|---|---|---|---|---|
| target | yes | The element ID the scrollbar will scroll | none | An element ID. |
| orient | yes | Is this a vertical or horizontal scrollbar | horizontal | horizontal, vertical |
When the thumb is dragged around, the scrollbar will fire an onchange event. You can hook up those events in the same way you would any other element. To obtain progress information, you'll want to get hold of the thumb element (available via scrollbarElement.Thumb).
Overflow:auto or Overflow:scroll
When an element automatically generates scrollbars, they become virtual elements in the shadow DOM. To access those, see more on virtual elements.
Internal DOM Structure
Don't type this out to use a scrollbar - this is provided for CSS selection purposes:
<!-- A complete vertical scrollbar -->
<scrollbar orient='vertical'>
<scrollbutton part='start' orient='up'/>
<scrollthumb orient='vertical'/>
<scrollbutton part='end' orient='down'/>
</scrollbar>
<!-- A full horizontal scrollbar -->
<scrollbar orient='horizontal'>
<scrollbutton part='start' orient='left'/>
<scrollthumb orient='horizontal'/>
<scrollbutton part='end' orient='right'/>
</scrollbar>The scrollbars act like direct parents of the element which is overflowing.
Thumb and button attributes
Both the buttons and the thumb automatically set some additional attributes which can be used with the attribute CSS selector.
| Attribute name | Optional | What it's for | Default value | Possible values |
|---|---|---|---|---|
| part | no | Start or end of the scrollbar | none | start, end |
| orient | no | Orientation of the button | none | up, down, left, right |
Styling examples
/* Every scrollbar will have a blue background */
scrollbar{
background:blue;
}
/* Just the scrollbars on the div with id='myOverflowingDiv' will have green backgrounds */
#myOverflowingDiv scrollbar{
background:green;
}
/* All horizontal scrollbars */
scrollbar[orient="horizontal"]{
border:1px solid black;
}
/* All scroll buttons */
scrollbutton{
background:orange;
}
/* All down pointing scroll buttons */
scrollbutton[orient="down"]{
background:red;
}
/* All buttons at the "end" of the bar (down and right) */
scrollbutton[part="end"]{
background:yellow;
}