Flexbox¶

from enamlnative.core.api import *
from enamlnative.widgets.api import *

enamldef ContentView(Flexbox): view:
    flex_direction = "column"
    Flexbox:
        background_color = "#cab"
        #: Flex direction arranges children in either a row or column
        flex_direction = "column"

        #: flex_basis (on Android) is the percentage of the parent size to consume
        flex_basis=0.25

        TextView:
            text = "flex_direction"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.flex_direction.items)
            selected = self.items.index(view.flex_direction)
            selected :: view.flex_direction = self.items[change['value']]
    Flexbox:
        background_color = "#bac"
        flex_direction = "column"
        #: flex_basis (on Android) is the percentage of the parent size to consume
        flex_basis=0.25

        #: Flex direction arranges children in either a row or column
        justify_content = "center"

        TextView:
            text = "justify_content  (within column)"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.justify_content.items)
            selected = self.items.index(parent.justify_content)
            selected :: parent.justify_content = self.items[change['value']]
    Flexbox:
        background_color = "#cba"
        flex_basis=0.15
        flex_direction = "column"
        TextView:
            text = "align_items (within column)"
        Spinner:
            height = "wrap_content"
            items = list(Flexbox.align_items.items)
            selected = self.items.index(parent.align_items)
            selected :: parent.align_items = self.items[change['value']]
    Flexbox:
        background_color = "#abc"
        flex_basis=0.35
        flex_direction = "column"
        Flexbox:
            height = "wrap_content"
            TextView:
                text = "align_content"
            Spinner:
                height = "wrap_content"
                items = list(Flexbox.align_content.items)
                selected = self.items.index(align_content_example.align_content)
                selected :: align_content_example.align_content = self.items[change['value']]
        Flexbox: align_content_example:
            flex_wrap = "wrap"
            Looper:
                iterable << range(10)
                Icon:
                    padding = (5,5,5,5)
                    text << "{fa-thumbs-up}" if loop_index & 1 else "{fa-thumbs-down}"
                    text_size = 48