The scroll bars component can be used to add a horizontal, and a vertical scroll bar pair to the graph. This component is used internally by the Scenic.Scrollable component, and for most cases it is recommended to use the Scenic.Scrollable component instead.

Data

Scenic.Scrollable.ScrollBars.settings/0

The scroll bars require the following data for initialization:

• width: number
• height: number
• content_size: Scenic.Scrollable.ScrollBars.v2/0
• scroll_position: number
• direction: :horizontal | :vertical

With and height define the size of the frame, and thus correspond to the width of the horizontal, and the height of the vertical scroll bars.

Styles

Scenic.Scrollable.ScrollBars.styles/0

The scroll bars can be customized by using the following styles:

scroll_bar

Scenic.Scrollable.ScrollBar.styles/0

The styles to customize both scrollbars as defined in the corresponding module Scenic.Scrollable.Scrollbar. If different styles for the horizontal and vertical scroll bars are preffered, use the horizontal_scroll_bar and vertical_scroll_bar styles instead.

horizontal_scroll_bar

Scenic.Scrollable.ScrollBar.styles/0

The styles to customize the horizontal scroll bar.

vertical_scroll_bar

Scenic.Scrollable.ScrollBar.styles/0

The styles to customize the vertical scroll bar.

scroll_drag

t:Scenic.Scrollable.Drag/0

Settings to specify which mouse buttons can be used in order to drag the scroll bar sliders.

scroll_bar_thickness

number

Specify the height of the horizontal, and the width of the vertical scroll bars.

Examples

iex> graph = Scenic.Scrollable.Components.scroll_bars(
...>   Scenic.Graph.build(),
...>   %{
...>     width: 200,
...>     height: 200,
...>     content_size: {1000, 1000},
...>     scroll_position: {0, 0}
...>   },
...>   [
...>     scroll_bar: [
...>       scroll_buttons: true,
...>       scroll_bar_theme: Scenic.Primitive.Style.Theme.preset(:light),
...>       scroll_bar_radius: 2,
...>       scroll_bar_border: 2,
...>       scroll_drag: %{
...>         mouse_buttons: [:left, :right, :middle]
...>       }
...>     ],
...>     scroll_drag: %{
...>       mouse_buttons: [:left, :right, :middle]
...>     },
...>     id: :scroll_bars_component_1
...>   ]
...> )
...> graph.primitives[1].id
:scroll_bars_component_1