:orphan:

.. _deep.py:

deep.py
=======

.. raw:: html

    <a target='new' href='../../ui/examples/deep.html' style='font-size:small; float:right;'>open in new tab</a><div style='width: 500px; height: 300px; align: center; resize:both; overflow: hidden; box-shadow: 5px 5px 5px #777;'><iframe src='../../ui/examples/deep.html' style='width: 100%; height: 100%; border: 2px solid #094;'>iframe not supported</iframe></div>

.. code-block:: py
    :linenos:


    """
    Example that shows deep nesting of layouts. This also functions as a
    test that such deep layouts actually work.
    """
    
    from flexx import ui, app
    
    class Red(ui.Widget):
        CSS = '.flx-Red { background: #ff0000;}'
    
    
    class Deep1(ui.Widget):
        # This was broken on Chrome earlier
        
        def init(self):
            
            with ui.VBox():
                
                ui.Label(text='Widget in a vbox in a widget in a vbox')
                
                with ui.VBox(flex=1):
                    with ui.Widget(flex=1):
                        with ui.VBox():
                            ui.Label(text='---')
                            Red(flex=1)
    
    
    class Deep2(ui.Widget):
        
        def init(self):
            
            with ui.VBox():
                
                ui.Label(text='Widget in a vbox in a vbox in a vbox')
                
                with ui.VBox(flex=1):
                    
                    with ui.VBox(flex=1):
                        ui.Label(text='---')
                        Red(flex=1)
    
    
    class Deep3(ui.Widget):
        
        def init(self):
            
            with ui.VBox():
                
                ui.Label(text='Widget in a vbox in a hbox in a vbox')
                
                with ui.HBox(flex=1):
                    ui.Label(text='|||')
                    
                    with ui.VBox(flex=1):
                        ui.Label(text='---')
                        Red(flex=1)
    
    
    class Deep4(ui.Widget):
        
        def init(self):
            
            with ui.HBox():
                
                ui.Label(text='Widget in a hbox in a widget in a hbox')
                
                with ui.HBox(flex=1):
                    with ui.Widget(flex=1):
                        with ui.HBox():
                            ui.Label(text='|||')
                            Red(flex=1)
    
    
    class Deep5(ui.Widget):
        
        def init(self):
            
            with ui.HBox():
                
                ui.Label(text='Widget in a hbox in a hbox in a hbox')
                
                with ui.HBox(flex=1):
                    
                    with ui.HBox(flex=1):
                        ui.Label(text='|||')
                        Red(flex=1)
    
    
    class Deep6(ui.Widget):
        
        def init(self):
            
            with ui.HBox():
                
                ui.Label(text='Widget in a hbox in a vbox in a hbox')
                
                with ui.VBox(flex=1):
                    ui.Label(text='---')
                    
                    with ui.HBox(flex=1):
                        ui.Label(text='|||')
                        Red(flex=1)
    
    
    class Deep(ui.Widget):
        def init(self):
            
            with ui.BoxPanel():
            
                with ui.BoxPanel():
                    Deep1()
                    Deep2()
                    Deep3()
                
                with ui.BoxPanel(orientation='vertical'):
                    Deep4()
                    Deep5()
                    Deep6()
    
    
    if __name__ == '__main__':
        app.launch(Deep, 'app')
        app.run()