template-138.html

<h1 id="grid-builder--loader">Grid Builder / Loader</h1>
<h2 id="grid-builder">Grid Builder</h2>
<p>The grid configuration builder provide a quick start way of using grid in your application. This will help new users to getting started with grid easier. You can try with different grid customization and grid extensions with a realtime result, then this configuration can be copy and paste into any application to get the same result as seen from this section.</p>
<code-sandbox hash="c205d3fb"><pre><code class="language-html">&lt;style&gt;
    .main-layout {
        height: 800px;
        display: flex;
    }
    .content-title {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 14px;
    }
    .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    #grid {
        height: 350px;
    }
    div {
        min-height: 24px;
    }
    hr  {
        margin-top: 15px;
        margin-bottom: 15px;
        width: 100%;
    }
    label {
        padding-right: 10px;
    }
    #configArea {
        flex: 1;
        width: 100%;
        margin-top: 10px;
        font-family: monospace;
    }
    #section-detail{
        height: 160px;
        overflow-y: scroll;
        padding-bottom: 10px;
        border: grey solid 1px;
    }
    .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .two-columns &gt; *:not(hr) {
        padding:2px;
        display: flex;
        align-items: center;
    }
&lt;/style&gt;

&lt;ef-sidebar-layout sidebar-width=&quot;0px&quot; class=&quot;main-layout&quot;&gt;
    &lt;ef-panel slot=&quot;main-content&quot; class=&quot;main-content&quot; spacing&gt;
        &lt;ef-tab-bar id=&quot;tabs&quot;&gt;&lt;/ef-tab-bar&gt;
        &lt;ef-panel spacing&gt;
            &lt;div id=&quot;section-detail&quot;&gt;&lt;/div&gt;
        &lt;/ef-panel&gt;
        &lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
        &lt;ef-overlay-menu id=&quot;menu&quot;&gt;&lt;/ef-overlay-menu&gt;
        &lt;textarea id=&quot;configArea&quot;&gt;&lt;/textarea&gt;
    &lt;/ef-panel&gt;
&lt;/ef-sidebar-layout&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.

/* ---------------------------------- Note ----------------------------------
  DataGenerator, Formatters and extensions are exposed to global scope
  in the bundle file to make it easier to create live examples.
  Importing formatters and extensions is still required in your application. 
  Please see the document for further information.
---------------------------------------------------------------------------*/
import &#39;./resources/grid-builder-app.min.js&#39;
</code></pre>
</code-sandbox><h2 id="grid-loader">Grid Loader</h2>
<p>In this section, you can try to paste your configuration object here to see an live result. This allow user to make advance customization to grid configuration object before using with their real application.</p>
<code-sandbox hash="681c7a3b"><pre><code class="language-css">.main-layout {
    height: 800px;
    display: flex;
    flex-direction: column;
}
.content-title {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#container {
    height: 400px;
}
#grid{
    height: 100%;
}
div {
    min-height: 24px;
}
hr  {
    margin-top: 15px;
    margin-bottom: 15px;
}
#configArea {
    width: 100%;
    padding-top: 15px;
    height: 300px;
    margin-bottom: 8px;
    font-family: monospace;
}
</code></pre>
<pre><code class="language-html">&lt;ef-sidebar-layout sidebar-width=&quot;0px&quot; class=&quot;main-layout&quot;&gt;
    &lt;ef-header slot=&quot;main-header&quot; level=&quot;1&quot;&gt;
        &lt;ef-button id=&quot;run&quot; icon=&quot;play&quot;&gt;RUN&lt;/ef-icon&gt;&lt;/ef-button&gt;
    &lt;/ef-header&gt;
    &lt;ef-panel slot=&quot;main-content&quot; class=&quot;main-content&quot; spacing&gt;
        &lt;textarea id=&quot;configArea&quot;&gt;&lt;/textarea&gt;
        &lt;div id=&quot;container&quot;&gt;
            &lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
        &lt;/div&gt;
        &lt;ef-overlay-menu id=&quot;menu&quot;&gt;&lt;/ef-overlay-menu&gt;
    &lt;/ef-panel&gt;
&lt;/ef-sidebar-layout&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.

/* ---------------------------------- Note ----------------------------------
  DataGenerator, Formatters and extensions are exposed to global scope
  in the bundle file to make it easier to create live examples.
  Importing formatters and extensions is still required in your application. 
  Please see the document for further information.
---------------------------------------------------------------------------*/
import &#39;./resources/grid-loader-app.min.js&#39;
</code></pre>
</code-sandbox>