Add two VSF layout-3 cards and one layout-1 card to overview page
This commit is contained in:
@@ -107,6 +107,310 @@
|
|||||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum. Praesent posuere nisl a nisl fermentum, nec feugiat odio volutpat. Nam id dictum justo, eget dapibus arcu. Fusce varius justo nec nibh gravida, sed dignissim est tempor.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
|
||||||
|
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||||
|
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||||
|
<div class="sg-strong">NAME DER LISTE</div>
|
||||||
|
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||||
|
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||||
|
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||||
|
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="edit">Editieren</a>
|
||||||
|
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete">Liste loeschen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||||
|
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Medianscore:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||||
|
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||||
|
PE: <span class="sg-data-table__value">28.8</span>
|
||||||
|
</p>
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||||
|
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||||
|
</p>
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||||
|
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||||
|
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
|
||||||
|
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Marktbewertung:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Wachstum:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Profitabilität:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilität:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||||
|
</div>
|
||||||
|
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||||
|
<div class="sg-object-card__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||||
|
<div class="sg-form-sections-card__field-group">
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Name</span>
|
||||||
|
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||||
|
</label>
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Beschreibung</span>
|
||||||
|
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="sg-delete-confirmation-pattern__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||||
|
Speichern
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||||
|
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||||
|
<span class="sg-label">Bestätigung</span>
|
||||||
|
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||||
|
</label>
|
||||||
|
<div class="sg-delete-confirmation-pattern__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||||
|
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||||
|
<div class="sg-strong">NAME DER LISTE</div>
|
||||||
|
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||||
|
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||||||
|
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
<span class="sg-sandwich-button__line"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||||||
|
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="edit-2">Editieren</a>
|
||||||
|
<a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="delete-2">Liste loeschen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-top">
|
||||||
|
<div class="sg-score-bar-list sg-score-bar-list--single-score" aria-label="Gesamtscore-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Medianscore:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" role="img" aria-label="Gesamtscore 96 Prozent mit Median-Marker bei 50 Prozent" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-pattern-part="list-card-placeholder-bottom">
|
||||||
|
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" aria-label="Company Kennzahlen dreispaltig verteilt" data-pattern-part="company-card-metrics-three-column">
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||||
|
PE: <span class="sg-data-table__value">28.8</span>
|
||||||
|
</p>
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||||
|
PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span>
|
||||||
|
</p>
|
||||||
|
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||||
|
PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
|
||||||
|
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
|
||||||
|
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Marktbewertung:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Wachstum:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Profitabilität:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sg-score-bar-item" data-component="score-bar">
|
||||||
|
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Stabilität:</p>
|
||||||
|
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||||||
|
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="sg-body sg-company-card__summary sg-vsf-list-card__summary">BESCHREIBUNG LISTE</p>
|
||||||
|
</div>
|
||||||
|
<footer class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-pattern-part="list-card-actions">
|
||||||
|
<div class="sg-object-card__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Unternehmen ansehen</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title-2" data-overlay-dialog="edit-2" hidden>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title-2"><strong>Liste editieren</strong></p>
|
||||||
|
<div class="sg-form-sections-card__field-group">
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Name</span>
|
||||||
|
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||||
|
</label>
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Beschreibung</span>
|
||||||
|
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="sg-delete-confirmation-pattern__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||||
|
Speichern
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title-2" data-overlay-dialog="delete-2" hidden>
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title-2"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||||
|
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||||
|
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||||
|
<span class="sg-label">Bestätigung</span>
|
||||||
|
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||||
|
</label>
|
||||||
|
<div class="sg-delete-confirmation-pattern__actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sg-sub-heading sg-section-h2">Layout 1: Neue Liste anlegen Karte</h2>
|
||||||
|
<div class="sg-object-card-grid" aria-label="VSF List Card Layout Neue Liste anlegen">
|
||||||
|
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||||
|
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||||
|
<div class="sg-strong">Neue Liste anlegen</div>
|
||||||
|
</header>
|
||||||
|
<div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
|
||||||
|
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
|
||||||
|
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
|
||||||
|
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||||
|
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
|
||||||
|
<div class="sg-form-sections-card__field-group">
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Listentyp</span>
|
||||||
|
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
|
||||||
|
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
|
||||||
|
Listentyp
|
||||||
|
</button>
|
||||||
|
<div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
|
||||||
|
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
|
||||||
|
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Name</span>
|
||||||
|
<input
|
||||||
|
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||||
|
type="text"
|
||||||
|
placeholder="Name eingeben"
|
||||||
|
aria-label="Name"
|
||||||
|
maxlength="80"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="sg-labeled-input-row">
|
||||||
|
<span class="sg-label">Beschreibung</span>
|
||||||
|
<textarea
|
||||||
|
class="sg-input-multi-line sg-form-inactive-selectable"
|
||||||
|
rows="4"
|
||||||
|
placeholder="Beschreibung eingeben"
|
||||||
|
aria-label="Beschreibung"
|
||||||
|
maxlength="350"
|
||||||
|
></textarea>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
||||||
|
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user