# Manual Vbox Example

An example which demonstrates the manual specification of a `vbox`.

This example demonstrates how one would manually define the constraints for a `vbox` style layout. In fact, the `vbox` layout helper generates the primitive constraints in a fashion very similar to this example. The intent of this example is to demonstrate that all of the layout helper functions can be distilled down to a list of primitive constraints.

Tip

To see this example in action, download it from `manual_vbox` and run:

    $ enaml-run manual_vbox.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    # Copyright (c) 2013-2025, Nucleic Development Team.
    #
    # Distributed under the terms of the Modified BSD License.
    #
    # The full license is in the file LICENSE, distributed with this software.
    #------------------------------------------------------------------------------
    """ An example which demonstrates the manual specification of a `vbox`.

    This example demonstrates how one would manually define the constraints
    for a `vbox` style layout. In fact, the `vbox` layout helper generates
    the primitive constraints in a fashion very similar to this example.
    The intent of this example is to demonstrate that all of the layout
    helper functions can be distilled down to a list of primitive
    constraints.

    << autodoc-me >>
    """
    from enaml.widgets.api import Window, Container, PushButton

    enamldef Main(Window):
        Container:
            constraints = [
                # Vertical Constraints
                contents_top == pb1.top,
                pb1.bottom + 10 == pb2.top,
                pb2.bottom + 10 == pb3.top,
                pb3.bottom == contents_bottom,
                # Horizontal Constraints
                (contents_left == pb1.left) | 'medium',
                (contents_left == pb2.left) | 'medium',
                (contents_left == pb3.left) | 'medium',
                (pb1.right == contents_right) | 'medium',
                (pb2.right == contents_right) | 'medium',
                (pb3.right == contents_right) | 'medium',
            ]
            PushButton: pb1:
                text = 'Spam'
            PushButton: pb2:
                text = 'Long Name Foo'
            PushButton: pb3:
                text = 'Bar'