# Banner Example

An example of using style sheets to create a banner from a Label.

Tip

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

    $ enaml-run banner.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 of using style sheets to create a banner from a Label.

    << autodoc-me >>
    """
    from enaml.widgets.api import (
        Window, Container, Label, Form, Field, Html, MultilineField, CheckBox
    )
    from enaml.styling import StyleSheet, Style, Setter
    from enaml.layout.api import vbox, hbox, align

    enamldef BannerSheet(StyleSheet):
        Style:
            element = 'Label'
            style_class = 'banner'
            Setter:
                field = 'background'
                value = (
                    'lineargradient(x1: 0, y1:0, x2:0, y2:1, stop: 0 #1356A9, '
                    'stop: 0.3 #8AAFDC, stop: 0.58 #E0E4E0, stop: 0.68 #F8D8B1, '
                    'stop: 0.848 #D39B8A, stop: 0.8499 #9C7F73, stop: 0.85 #D79F88, '
                    'stop: 0.851 #E2BF9B, stop: 1 #817F73)'
                )
            Setter:
                field = 'color'
                value = '#FFFFEF'
            Setter:
                field = 'padding'
                value = '5px'
            Setter:
                field = 'font'
                value = '18pt Verdana'

    enamldef Main(Window):
        title = 'Banner Example'
        BannerSheet:
            pass
        Container:
            constraints = [
                vbox(hbox(form, description), primary),
                banner.top == top,
                banner.left == left,
                banner.right == right,
                banner.bottom + 10 == form.top,
                align('top', form, description),
            ]
            Label: banner:
                text = 'Banner Text'
                style_class << 'banner' if cbox.checked else ''
            Form: form:
                padding = 0
                hug_width = 'strong'
                hug_height = 'required'
                Label:
                    text = 'First'
                Field:
                    placeholder = 'First Value'
                Label:
                    text = 'Second'
                Field:
                    placeholder = 'Second Value'
                Label:
                    text = 'Third'
                Field:
                    placeholder = 'Third Value'
                Label:
                    text = 'Fourth'
                Field:
                    placeholder = 'Fourth Value'
                CheckBox: cbox:
                    text = 'Toggle Banner Style'
                    checked = True
            MultilineField: description:
                text = 'description...'
                enabled = False
                constraints = [height == form.height]
            Html: primary:
                source = '<h1><center>Primary Content</center></h1>'