This is a split pane view library. Can be used to split views into multiple parts with a splitter between them.
Check out the examples to see how it works.
view : ViewConfig msg -> Html msg -> Html msg -> State -> Html msg
Creates a view.
view : Model -> Html Msg
view =
SplitPane.view viewConfig firstView secondView
viewConfig : ViewConfig Msg
viewConfig =
createViewConfig
{ toMsg = PaneMsg
, customSplitter = Nothing
}
firstView : Html a
firstView =
img [ src "http://4.bp.blogspot.com/-s3sIvuCfg4o/VP-82RkCOGI/AAAAAAAALSY/509obByLvNw/s1600/baby-cat-wallpaper.jpg" ] []
secondView : Html a
secondView =
img [ src "http://2.bp.blogspot.com/-pATX0YgNSFs/VP-82AQKcuI/AAAAAAAALSU/Vet9e7Qsjjw/s1600/Cat-hd-wallpapers.jpg" ] []
createViewConfig : { toMsg : Msg -> msg, customSplitter : Maybe (CustomSplitter msg) } -> ViewConfig msg
Creates a configuration for the view.
update : Msg -> State -> State
Updates internal model.
subscriptions : State -> Platform.Sub.Sub Msg
Subscribes to relevant events for resizing
Tracks state of pane.
init : Orientation -> State
Initialize a new model.
init Horizontal
configureSplitter : SizeUnit -> State -> State
Change the splitter position and limit
orientation : Orientation -> State -> State
Changes orientation of the pane.
draggable : Basics.Bool -> State -> State
Sets whether the pane is draggable or not
percentage : Basics.Float -> Maybe ( Basics.Float, Basics.Float ) -> SizeUnit
Creates a percentage size unit from a float
px : Basics.Int -> Maybe ( Basics.Int, Basics.Int ) -> SizeUnit
Creates a pixel size unit from an int
Internal messages.
Orientation of pane.
Size unit for setting slider - either percentage value between 0.0 and 1.0 or pixel value (> 0)
Configuration for the view.
Configuration for updates.
Describes a custom splitter
{ attributes : List (Html.Attribute msg)
, children : List (Html msg)
}
Lets you specify attributes such as style and children for the splitter element
customUpdate : UpdateConfig msg -> Msg -> State -> ( State, Maybe msg )
Updates internal model using custom configuration.
createUpdateConfig : { onResize : SizeUnit -> Maybe msg, onResizeStarted : Maybe msg, onResizeEnded : Maybe msg } -> UpdateConfig msg
Creates the update configuration. Gives you the option to respond to various things that happen.
For example:
- Draw a different view when the pane is resized:
updateConfig
{ onResize (\p -> Just (SwitchViews p))
, onResizeStarted Nothing
, onResizeEnded Nothing
}
createCustomSplitter : (Msg -> msg) -> HtmlDetails msg -> CustomSplitter msg
Creates a custom splitter.
myCustomSplitter : CustomSplitter Msg
myCustomSplitter =
createCustomSplitter PaneMsg
{ attributes =
[ style
[ ( "width", "20px" )
, ( "height", "20px" )
]
]
, children =
[]
}