Layout overview

Your view will need extend the base.html.twig layout

{% extends '@pulsar/layouts/base.html.twig' %}

@pulsar is a variable that Jadu products need to define in their Twig bootstrap/constructor via the $loader->addPath() method. See http://twig.sensiolabs.org/doc/api.html#built-in-loaders.

Tabs

Tab views will need to extend the tabs component

{% extends "@pulsar/pulsar/components/tab.html.twig" %}

They can then populate the content blocks which make up a tab, an example tab view looks like this:

{% extends "@pulsar/pulsar/components/tab.html.twig" %}

{%- block actions_left -%}
  Actions bar items that are positioned on the left, like the html.actions_menu helper
{%- endblock actions_left -%}

{%- block actions_right -%}
  Actions bar items that are positioned on the right, like primary UI actions
{%- endblock actions_left -%}

{%- block tab_content -%}
  The main content of a tab goes here
{% endblock tab_content %}

{%- block tab_sidebar -%}
  Sidebar help text goes here
{%- endblock tab_sidebar -%}

Example DOM outline

To help troubleshoot layout issues, this is the expected outline of the DOM for most UI cases within a Pulsar UI.

<!DOCTYPE html>
<html class="no-js">
<head><!-- ... --></head>
<body class="language-html">

    <div role="main" class="container">

        <div class="inner-wrapper">

            <nav class="nav-main"><!-- ... --></nav>

            <div class="toolbar"><!-- ... --></div>

            <div class="sticky-container">

                <form class="main-search"><!-- ... --></form>

                <div class="content-main">

                    <div class="tabs__content">

                        <h1 class="main-title">Title</h1>

                        <div class="nav-inline"><!-- ... --></div>

                        <div class="tab__pane is-active">

                            <div class="actionsbar">

                                <div class="float--left"><!-- ... --></div>
                                <div class="float--right"><!-- ... --></div>

                            </div>

                            <div class="tab__container">

                                <div class="tab__inner">

                                    <div class="tab__content"><!-- ... --></div>
                                    <div class="tab__sidebar"><!-- ... --></div>

                                </div><!-- /.tab__inner -->

                            </div><!-- /.tab__container -->

                        </div><!-- /.tab__pane -->

                    </div><!-- /.tabs__content -->

                </div><!-- /.content-main -->

                <div class="tab-help-container t-tab-help-container">
                    <div class="tab-help"></div>
                </div>

            </div><!-- /.sticky-container -->

        </div><!-- /.inner-wrapper -->

    </div><!-- /.container -->

</body>
</html>

results matching ""

    No results matching ""