Add card group tab navigation with nine fundamental tabs to VSF drawer

2026-05-21 16:09:38 +02:00
parent 1832f3c3be
commit 6a53ecd9c1
1 changed files with 106 additions and 0 deletions
@@ -60,6 +60,76 @@
    <p class="sg-strong sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width sg-vsf-drawer-next-earnings" data-pattern-part="text-block-full-width">
      Nächste Quartalszahlen: nicht bekannt
    </p>
+    <div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
+      <div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Fundamentalanalyse Navigation" data-component="tab-navigation" data-component-size="large">
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-fundamental-tab-panel-1" id="vsf-fundamental-tab-1" data-component-part="tab-button">Gesamtbewertung</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-2" id="vsf-fundamental-tab-2" data-component-part="tab-button">Marktbewertung</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-3" id="vsf-fundamental-tab-3" data-component-part="tab-button">Wachstum</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-4" id="vsf-fundamental-tab-4" data-component-part="tab-button">Profitabilität</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-5" id="vsf-fundamental-tab-5" data-component-part="tab-button">Stabilität</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-6" id="vsf-fundamental-tab-6" data-component-part="tab-button">TAM</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-7" id="vsf-fundamental-tab-7" data-component-part="tab-button">Zyklus</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-8" id="vsf-fundamental-tab-8" data-component-part="tab-button">Moat</button>
+        <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-fundamental-tab-panel-9" id="vsf-fundamental-tab-9" data-component-part="tab-button">Technologie</button>
+      </div>
+
+      <div class="sg-content-block-card-group__panels">
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Gesamtbewertung.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Marktbewertung">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Marktbewertung.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Wachstum">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Profitabilität">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Stabilität">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-6" role="tabpanel" aria-labelledby="vsf-fundamental-tab-6" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="TAM">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt TAM.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-7" role="tabpanel" aria-labelledby="vsf-fundamental-tab-7" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Zyklus">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Zyklus.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-8" role="tabpanel" aria-labelledby="vsf-fundamental-tab-8" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Moat">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Moat.</p></div>
+          </article>
+        </div>
+        <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-9" role="tabpanel" aria-labelledby="vsf-fundamental-tab-9" hidden>
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Technologie">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie</div></div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Technologie.</p></div>
+          </article>
+        </div>
+      </div>
+    </div>

    <div class="sg-navigation-card-layout">
      <div class="sg-navigation-card-block">
@@ -90,6 +160,42 @@
          : 'Geschäftsmodell anzeigen';
      });
    }
+
+    const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
+
+    if (tabGroup) {
+      const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
+      const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
+
+      const activateTab = (targetTab) => {
+        tabs.forEach((tab) => {
+          tab.setAttribute('aria-selected', String(tab === targetTab));
+        });
+
+        panels.forEach((panel) => {
+          panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
+        });
+      };
+
+      tabs.forEach((tab, index) => {
+        tab.addEventListener('click', () => {
+          activateTab(tab);
+        });
+
+        tab.addEventListener('keydown', (event) => {
+          if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+            return;
+          }
+
+          event.preventDefault();
+          const direction = event.key === 'ArrowRight' ? 1 : -1;
+          const nextIndex = (index + direction + tabs.length) % tabs.length;
+          const nextTab = tabs[nextIndex];
+          nextTab.focus();
+          activateTab(nextTab);
+        });
+      });
+    }
  </script>

 </body>