html_components.py

# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
import styles
from server import app

layout = html.Div(children=[

    dcc.Markdown('''
    # Dash HTML Components

    Dash is a web application framework that provides pure Python abstraction
    around HTML, CSS, and JavaScript.

    Instead of writing HTML or using an HTML templating engine,
    you compose your layout using Python structures with the
    `dash-html-components` library.

    The source for this library is on GitHub: [plotly/dash-html-components](https://github.com/plotly/dash-html-components).

    Here is an example of a simple HTML structure:
    '''.replace('    ', '')),

    dcc.SyntaxHighlighter('''import dash_html_components as html

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
        html.P('This conversion happens behind the scenes by Dash\'s JavaScript front-end')
    ])
])''', language='python', customStyle={'borderLeft': 'thin solid lightgrey'}),
    html.Div(
        'which gets converted (behind the scenes) into the '
        'following HTML in your web-app:'
    ),
    dcc.SyntaxHighlighter('''<div>
    <h1>Hello</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
        <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p>
    </div>
</div>''', language='python', customStyle={'borderLeft': 'thin solid lightgrey'}),
    dcc.Markdown('''
        If you're not comfortable with HTML, don't worry!
        You can get 95% of the way there with just a few elements
        and attributes.
        Dash's [core component library](/dash-core-components) also supports
        [Markdown](http://commonmark.org/help).
    '''.replace('  ', '')),

    dcc.SyntaxHighlighter('''import dash_core_components as dcc

    dcc.Markdown(\'\'\'
    #### Dash and Markdown

    Dash supports [Markdown](http://commonmark.org/help).

    Markdown is a simple way to write and format text.
    It includes a syntax for things like **bold text** and *italics*,
    [links](http://commonmark.org/help), inline `code` snippets, lists,
    quotes, and more.
    \'\'\')
    '''.replace('  ', ''),
        customStyle=styles.code_container,
        language='python'
    ),

    dcc.Markdown('''
    #### Dash and Markdown

    Dash supports [Markdown](http://commonmark.org/help).

    Markdown is a simple way to write and format text.
    It includes a syntax for things like **bold text** and *italics*,
    [links](http://commonmark.org/help), inline `code` snippets, lists,
    quotes, and more.'''.replace('  ', ''),
    containerProps={'className': 'example-container'}),

    dcc.Markdown('''
        If you're using HTML components, then you also access to
        properties like `style`, `class`, and `id`.
        All of these attributes are available in the Python classes.

        The HTML elements and Dash classes are mostly the same but there are
        a few key differences:
        - The `style` property is a dictionary
        - Properties in the `style` dictionary are camelCased
        - The `class` key is renamed as `className`
        - Style properties in pixel units can be supplied as just numbers without the `px` unit

        Let's take a look at an example.
    '''.replace('    ', '')),

    dcc.SyntaxHighlighter('''import dash_html_components as html

html.Div([
    html.Div('Example Div', style={'color': 'blue', 'fontSize': 14}),
    html.P('Example P', className='my-class', id='my-p-element')
], style={'marginBottom': 50, 'marginTop': 25})
''', language='python', customStyle=styles.code_container),

    html.Div("That dash code will render this HTML markup:"),

    dcc.SyntaxHighlighter('''
<div style="margin-bottom: 50px; margin-top: 25px;">

    <div style="color: blue; font-size: 14px">
        Example Div
    </div>

    <p class="my-class", id="my-p-element">
        Example P
    </p>

</div>
''', language='html', customStyle=styles.code_container)
])