UI Components

The previous chapter explained how scoped styles work and how there are components with scoped styles already available in the live-elements-web package.

In this chapter we are going to go through some emore examples of such components and how to use them.

Creating a dropdown

Thare are 2 parts you need in a dropdown: the button to toggle the dropdown and the dropdown content. The DropdownToggleButton and the DropdownContent are placed inside the Dropdown component. The Dropdown component provides the stylesheet, so don't forget to add the Dropdown component to the use property.

import live-web.dom
import live-web-view.button
import live-web-view.layout
import live-web-view.overlay
import live-web-view.content
import live-elements-web-server.view
import live-elements-web-server.style

component Index < PageView{
    static any[] use = [
        CenterLayout,
        Dropdown, // add Dropdown component
        UlV,
        ScopedStyle{ src: './index.css'}
    ]

    CenterLayout{
        Dropdown{
            DropdownToggleButton{
                T`Dropdown`
            }
            DropdownContent{
                UlV{ border: true
                    Li`Item 1`
                    Li`Item 2`
                    Li`Item 3`
                }
            }
        }
    }
}

Inside the DropdownContent we've placed an UlV list, but feel free to place anything else.

Creating a modal

The Modal component, part of live-web-view.overlay module, has a show() function which takes any DOMElement to show as part of the modal.

The ModalConfirmBox is a view that can be passed to the modal, to create a custom confirmation dialog.

The Modal needs to be placed preferably somewhere close to the root of the document, so it can occupy the full screen of the page.

import live-web.dom
import live-web-view.layout
import live-web-view.overlay
import live-web-view.content
import live-web-view.button
import live-elements-web-server.view
import live-elements-web-server.style

component Index < PageView{
    static any[] use = [
        CenterLayout,
        Modal,
        ModalConfirmBox,
        ScopedStyle{ src: './index.css'}
    ]

    Body{
        Modal{ id: modal }

        CenterLayout{
            PrimaryButton{
                T`Confirm Message box.`
                on click: (e) => {
                    e.preventDefault()
                    modal.show(
                        ModalConfirmBox{
                            title: 'Confirm'
                            message: 'Confirm this message'
                            yes: () => { console.log('Confirmed'); modal.hide(); }
                            no: () => { console.log('Not Confirmed'); modal.hide(); }
                        }
                    )
                }
            }
        }
    }
    
}

Creating a Tab Layout

The TabLayout component, in live-web-view.layout module, has 2 sections:

• a TabHeader, where we list each TabButton
• a TabContent, where we list each TabPane

import live-web.dom
import live-web-view.layout
import live-elements-web-server.view
import live-elements-web-server.style

component Tabs < PageView{
    static any[] use = [
        TabLayout,
        ScopedStyle{ src: './index.css'}
    ]
    
    Body{ style: { padding: '1rem' }
        
        TabLayout{
            TabHeader{
                TabButton{ T`Tab 1` }
                TabButton{ T`Tab 2` }
                TabButton{ T`Tab 3` }
            }
            TabContent{
                TabPane{
                    P`Content for Tab 1`
                }
                TabPane{
                    P`Content for Tab 2`
                }
                TabPane{
                    H1`Content for Tab 3`
                }
            }
        }
    }
}

Creating a Treeview

The TreeView component, located in live-web-view.content takes a TreeNode as it's data.A TreeNode can have children, and the TreeView will spread the children according to their hierarchy.Each TreeNode section can be expanded or collapsed.

import live-web.dom
import live-web.behavior
import live-web-view.content
import live-web-view.content.data
import live-elements-web-server.view
import live-elements-web-server.style

component Tree < PageView{
    static any[] use = [
        TreeView,
        ScopedStyle{ src: './index.css'}
    ]

    Body{
        TreeView{
            data: TreeNode{
                TreeNode`Item 1`
                TreeNode{
                    label: 'Item 2'

                    TreeNode`Item 2.1`
                    TreeNode`Item 2.2`

                    TreeNode{
                        label: 'Item 2.3'
                        TreeNode`Item 2.3.1`
                        TreeNode`Item 2.3.2`
                    }
                }
            }
        }
    }
}

Other examples

Additionally to the examples available in the playground, there are more undocummented examples you can check inside the samples/views folder from the live-elements-web repository in github. You can clone the repo, install dependencies, and simply start the examples with: npx lvweb serve ./samples/views/bundle/bundle.lv. You can see all the available routes in samples/views/bundle/bundle.lv file.

Next

There are more tutorials available in the tutorials section in the documentation which can be done outside of the playground.