update example

infor-design · Nov 7, 2022 · 343a39b · 343a39b
1 parent 08cab50
commit 343a39b
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 18 deletions.
diff --git a/src/components/ids-tabs/demos/action-panel.html b/src/components/ids-tabs/demos/action-panel.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
   <%= htmlWebpackPlugin.options.font %>
 </head>
+
 <body>
-  <ids-container role="main" padding="8" hidden>
+  <ids-container role="main" padding="0" hidden>
     <ids-theme-switcher mode="light"></ids-theme-switcher>
 
     <ids-layout-grid auto="true">
@@ -14,34 +18,94 @@
       </ids-layout-grid-cell>
     </ids-layout-grid>
 
-    <ids-action-panel id="cap-company-info" fullsize="lg">
+    <ids-action-panel id="cap-company-info">
 
       <ids-toolbar slot="toolbar">
         <ids-toolbar-section type="title">
-          <ids-text font-size="20" type="h2">Vertical Tabs</ids-text>
+          <ids-text font-size="20" type="h2">Form Configuration</ids-text>
         </ids-toolbar-section>
 
         <ids-toolbar-section type="buttonset" align="end">
+          <ids-button id="btn-save" icon="save" no-padding>
+            <ids-text font-weight="bold">Save</ids-text>
+          </ids-button>
+          <ids-separator vertical="true"></ids-separator>
           <ids-button id="btn-close" icon="close" no-padding>
             <ids-text font-weight="bold">Close</ids-text>
           </ids-button>
         </ids-toolbar-section>
       </ids-toolbar>
 
-      <ids-layout-grid no-margins="true">
-        <ids-layout-grid-cell col-span="4">
-          <ids-tabs orientation="vertical">
-            <ids-tab value="tab-1">Tab 1</ids-tab>
-            <ids-tab value="tab-2">Tab 2</ids-tab>
-            <ids-tab value="tab-3">Tab 3</ids-tab>
-            <ids-tab value="tab-4">Tab 4</ids-tab>
-          </ids-tabs>
-        </ids-layout-grid-cell>
-        <ids-layout-grid-cell col-span="8">
-          <ids-text font-size="16" text-align="center">Content Panel</ids-text>
-          <ids-text></ids-text>
-        </ids-layout-grid-cell>
-      </ids-layout-grid>
+      <ids-tabs-context>
+        <ids-layout-flex direction="row">
+          <ids-layout-flex-item>
+            <ids-tabs value="contracts" orientation="vertical">
+              <ids-tab value="contracts">Contracts</ids-tab>
+              <ids-tab value="opportunities">Opportunities</ids-tab>
+              <ids-tab value="attachments">Attachments</ids-tab>
+              <ids-tab value="notes">Notes</ids-tab>
+            </ids-tabs>
+          </ids-layout-flex-item>
+          <ids-layout-flex-item>
+            <div class="ids-tabs-content">
+              <ids-tab-content value="contracts">
+                <ids-layout-grid auto="true">
+                  <ids-layout-grid-cell>
+                    <ids-text font-size="20" type="h2" text-align="center">Contracts</ids-text>
+                    <br />
+                    <ids-text font-size="16" type="p">Facilitate cultivate monetize, seize e-services peer-to-peer content
+                      integrateAJAX-enabled user-centric strategize. Mindshare; repurpose integrate global addelivery
+                      leading-edge frictionless, harness real-time plug-and-play standards-compliant 24/7 enterprise strategize
+                      robust infomediaries: functionalities back-end. Killer disintermediate web-enabled ubiquitous empower
+                      relationships, solutions, metrics architectures.</ids-text>
+                  </ids-layout-grid-cell>
+                </ids-layout-grid>
+              </ids-tab-content>
+              <ids-tab-content value="opportunities">
+                <ids-layout-grid auto="true">
+                  <ids-layout-grid-cell>
+                    <ids-text font-size="16" type="p">
+                      <ids-text font-size="20" type="h2" text-align="center">Opportunities</ids-text>
+                      <br />
+                      Bricks-and-clicks? Evolve ubiquitous matrix B2B 24/365 vertical 24/365 platforms standards-compliant
+                      global leverage dynamic 24/365 intuitive ROI seamless rss-capable. Cutting-edge grow morph web services
+                      leverage; ROI, unleash reinvent innovative podcasts citizen-media networking.
+                    </ids-text>
+                  </ids-layout-grid-cell>
+                </ids-layout-grid>
+              </ids-tab-content>
+              <ids-tab-content value="attachments">
+                <ids-layout-grid auto="true">
+                  <ids-layout-grid-cell>
+                    <ids-text font-size="20" type="h2" text-align="center">Attachments</ids-text>
+                    <br />
+                    <ids-text font-size="16" type="p">
+                      Frictionless webservices, killer open-source innovate, best-of-breed, whiteboard interactive back-end
+                      optimize capture dynamic front-end. Initiatives ubiquitous 24/7 enhance channels B2B drive frictionless
+                      web-readiness generate recontextualize widgets applications. Sexy sticky matrix, user-centred, rich
+                      user-centric: peer-to-peer podcasting networking addelivery optimize streamline integrated proactive:
+                      granular morph.
+                    </ids-text>
+                  </ids-layout-grid-cell>
+                </ids-layout-grid>
+              </ids-tab-content>
+              <ids-tab-content value="notes">
+                <ids-layout-grid auto="true">
+                  <ids-layout-grid-cell>
+                    <ids-text font-size="20" type="h2" text-align="center">Notes</ids-text>
+                    <br />
+                    <ids-text font-size="16" type="p">
+                      Evolve ubiquitous matrix B2B 24/365 vertical 24/365 platforms standards-compliant
+                      global leverage dynamic 24/365 intuitive ROI seamless rss-capable. Cutting-edge grow morph web services
+                      leverage; ROI, unleash reinvent innovative podcasts citizen-media networking.
+                    </ids-text>
+                  </ids-layout-grid-cell>
+                </ids-layout-grid>
+              </ids-tab-content>
+            </div>
+          </ids-layout-flex-item>
+        </ids-layout-flex>
+      </ids-tabs-context>
     </ids-action-panel>
 
     <ids-layout-grid>

diff --git a/src/components/ids-tabs/demos/action-panel.ts b/src/components/ids-tabs/demos/action-panel.ts
@@ -1,4 +1,5 @@
 import '../../ids-action-panel/ids-action-panel';
+import '../../ids-layout-flex/ids-layout-flex';
 
 document.addEventListener('DOMContentLoaded', () => {
   const triggerId: any = '#cap-trigger-btn';