Curtissimo.SplitPane provides a nestable split pane for Elm.
import Curtissimo.SplitPane as SplitPane exposing (SplitPane)
import Html exposing (Html, text)
type alias Model =
{ splitPane : SplitPane Msg }
type Msg
= SplitPaneMsg SplitPane.Msg
| SplitPaneReady
init : () -> ( Model, Cmd Msg )
init _ =
let
( splitPane, splitPaneCmd ) =
SplitPane.init
SplitPane.VerticalOrientation
(SplitPane.Px 200)
SplitPane.After
"split-pane"
SplitPaneMsg
SplitPaneReady
in
( { splitPane = splitPane }
, splitPaneCmd
)
subscriptions : Model -> Sub Msg
subscriptions model =
SplitPane.subscriptions model.splitPane
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
SplitPaneMsg splitPaneMsg ->
let
( updated, updatedMsg ) =
model.splitPane
|> SplitPane.update splitPaneMsg
in
( { splitPane = updated }
, updatedMsg
)
SplitPaneReady ->
( model, Cmd.none )
view : Model -> Browser.Document Msg
view model =
{ title = "My Split Pane Page"
, body =
model.splitPane
|> SplitPane.assignPanes
|> SplitPane.setPrimaryPane
(text "Primary pane")
|> SplitPane.setSecondaryPane
(text "Secondary pane")
|> SplitPane.view
}NOTE: Don't forget to include the subscriptions!
Orientations the split pane can have.
Indicator if the secondary pane is before or after the primary pane.
The way to specify the measure of the secondary pane.
Change SplitPane into SplitPaneRenderable to prepare it to render.
Set the content of the primary pane of the split pane.
Set the content of the secondary pane of the split pane.
Render the split pane.
The subscriptions used to monitor mouse movements when a split pane resize is active, as well as window resizing.
Set the secondary pane to a specific measure based on how the split pane was initialized. If the split pane was initialized as a percentage, then the integer value is clamped to 0 and 100 inclusive.
Set the visibility of the secondary pane.
When set to False, the secondary pane and the resize gutter are not visible.
Changes the layout of the resize gutter to be thin or thick based on the flag provided.
Get the current measure of the secondary pane.
Query the state to determine if the split pane uses thick gutters
Query the state to determine if the secondary pane is visible.
The messages the split pane uses.
The state of the split pane.
The bridge between states and rendering.
Initialize a new split pane.