FloUI.Scrollable.ScrollBar (FloUI v0.1.0-alpha) View Source
The scroll bar component can be used to draw a scroll bar to the scene by adding it to the graph. The scroll bar is used internally by the Scenic.Scrollable
component and for most cases it is recommended to use the Scenic.Scrollable
component instead.
The scroll bar can be setup to make use of scroll buttons at the scroll bars edges, in order to enable scrolling by pressing and holding such button, in addition to dragging the scroll bar slider control to drag, or clicking the slider background to jump.
Data
t:Scenic.Scrollable.ScrollBar.settings/0
The scroll bar requires the following data for initialization:
- width: number
- height: number
- content_size: number
- scroll_position: number
- direction: :horizontal | :vertical
Width and height define the display size of the scroll bar. The content size defines the size of the scrollable content in the direction of the scroll bar. When the scroll bar is a horizontal scroll bar, the content size should correspond to the width of the content. The scroll position specifies the starting position of the scrollable content. Note that the scroll position corresponds to the translation of the content, rather than the scroll bar slider. The direction specifies if the scroll bar scrolls in horizontal, or in vertical direction.
Styles
t:Scenic.Scrollable.ScrollBar.styles/0
Optional styles to customize the scroll bar. The following styles are supported:
- scroll_buttons: boolean
- scroll_bar_theme: map
- scroll_bar_radius: number
- scroll_bar_border: number
- scroll_drag:
t:Scenic.Scrollable.Drag.settings/0
The scroll_buttons boolean can be used to specify of the scroll bar should contain buttons for scrolling, in addition to the scroll bar slider. The scroll buttons are not shown by default.
A theme can be passed using the scroll_bar_theme element to provide a set of colors for the scroll bar. For more information on themes, see the Scenic.Primitive.Style.Theme
module. The default theme is :light
.
The scroll bars rounding and border can be adjusted using the scroll_bar_radius and scroll_bar_border elements respectively. The default values are 3 and 1.
The scroll_drag settings can be provided to specify by which mouse button the scroll bar slider can be dragged. By default, the :left
, :right
and :middle
buttons are all enabled.
Examples
iex> graph = Scenic.Scrollable.Components.scroll_bar(
...> Scenic.Graph.build(),
...> %{
...> width: 200,
...> height: 10,
...> content_size: 1000,
...> scroll_position: 0,
...> direction: :horizontal
...> },
...> [id: :scroll_bar_component_1]
...> )
...> graph.primitives[1].id
:scroll_bar_component_1
iex> graph = Scenic.Scrollable.Components.scroll_bar(
...> Scenic.Graph.build(),
...> %{
...> width: 200,
...> height: 10,
...> content_size: 1000,
...> scroll_position: 0,
...> direction: :horizontal
...> },
...> [
...> scroll_buttons: true,
...> scroll_bar_theme: Scenic.Primitive.Style.Theme.preset(:dark),
...> scroll_bar_radius: 4,
...> scroll_bar_border: 1,
...> scroll_drag: %{
...> mouse_buttons: [:left, :right]
...> },
...> id: :scroll_bar_component_2
...> ]
...> )
...> graph.primitives[1].id
:scroll_bar_component_2
Link to this section Summary
Types
Atom representing a mouse button.
Data structure representing a rectangle.
A map containing information about the scroll button pressed states.
Specifies the direction in which the scroll bar affects the content. A direction can be either :horizontal or :vertical.
The data required to initialize a scroll bar component. The scroll bar requires the following data for initialization
The optional styles with which the scroll bar component can be customized. See this modules top section for a more detailed explanation of every style.
A collection of optional styles with which the scroll bar component can be customized. See t:Scenic.Scrollable.ScrollBar.style/0
and this modules top section for more information.
The state with which the scroll bar components GenServer is running.
Data structure representing a vector 2, in the form of an {x, y} tuple.
Functions
Callback implementation for Scenic.Component.add_to_graph/3
.
Returns a specification to start this module under a supervisor.
Find out the direction in which the content should be scrolled based on the scroll buttons currently being pressed. Although the scroll bar will move along a single axis, a vector 2 is returned to facilitate translation calculations of the content.
Find out if the scroll bar is currently being dragged by the user.
Find the latest position the scrollable content should be updated with. The position corresponds to the contents translation, rather than the scroll bars drag control translation.
Link to this section Types
Specs
mouse_button() :: :left | :right | :middle
Atom representing a mouse button.
Specs
rect() :: Scenic.Scrollable.rect()
Data structure representing a rectangle.
Specs
scroll_buttons() :: %{ scroll_button_1: :pressed | :released, scroll_button_2: :pressed | :released }
A map containing information about the scroll button pressed states.
Specs
scroll_direction() :: FloUI.Scrollable.Direction.direction()
Specifies the direction in which the scroll bar affects the content. A direction can be either :horizontal or :vertical.
Specs
settings() :: %{ width: number(), height: number(), content_size: number(), scroll_position: number(), direction: scroll_direction() }
The data required to initialize a scroll bar component. The scroll bar requires the following data for initialization:
- width: number
- height: number
- content_size: number
- scroll_position: number
- direction: :horizontal | :vertical
Width and height define the display size of the scroll bar. The content size defines the size of the scrollable content in the direction of the scroll bar. When the scroll bar is a horizontal scroll bar, the content size should correspond to the width of the content. The scroll position specifies the starting position of the scrollable content. Note that the scroll position corresponds to the translation of the content, rather than the scroll bar slider. The direction specifies if the scroll bar scrolls in horizontal, or in vertical direction.
Specs
style() :: {:scroll_buttons, boolean()} | {:scroll_bar_theme, %{}} | {:scroll_bar_radius, number()} | {:scroll_bar_border, number()} | {:scroll_drag, FloUI.Scrollable.Drag.settings()}
The optional styles with which the scroll bar component can be customized. See this modules top section for a more detailed explanation of every style.
Specs
styles() :: [style()]
A collection of optional styles with which the scroll bar component can be customized. See t:Scenic.Scrollable.ScrollBar.style/0
and this modules top section for more information.
Specs
t() :: %FloUI.Scrollable.ScrollBar{ content_size: FloUI.Scrollable.Direction.t(), direction: scroll_direction(), drag_state: FloUI.Scrollable.Drag.t(), frame_size: FloUI.Scrollable.Direction.t(), graph: Scenic.Graph.t(), height: FloUI.Scrollable.Direction.t(), id: atom(), last_scroll_position: FloUI.Scrollable.Direction.t(), pid: pid(), position_cap: FloUI.Scrollable.PositionCap.t(), scroll_bar_slider_background: :pressed | :released, scroll_buttons: :none | {:some, scroll_buttons()}, scroll_position: FloUI.Scrollable.Direction.t(), scroll_state: :idle | :wheel | :scrolling | :dragging, styles: styles(), wheel_state: FloUI.Scrollable.Wheel.t(), width: FloUI.Scrollable.Direction.t() }
The state with which the scroll bar components GenServer is running.
Specs
v2() :: Scenic.Scrollable.v2()
Data structure representing a vector 2, in the form of an {x, y} tuple.
Link to this section Functions
Callback implementation for Scenic.Component.add_to_graph/3
.
Returns a specification to start this module under a supervisor.
See Supervisor
.
Specs
Find out the direction in which the content should be scrolled based on the scroll buttons currently being pressed. Although the scroll bar will move along a single axis, a vector 2 is returned to facilitate translation calculations of the content.
Specs
Find out if the scroll bar is currently being dragged by the user.
Specs
Find the latest position the scrollable content should be updated with. The position corresponds to the contents translation, rather than the scroll bars drag control translation.