Erstellen Sie eine Rechercheoberfläche, in der Zahlen bündig ausgerichtet sind, Asset-Farben ihre Bedeutung behalten und die Typografie gut lesbar bleibt. Entdecken Sie MDS-Konstanten, die Integration mit Vue 3, den Übergang zu Morningstar Intrinsic und ein sortierbares, fiktives Allokationsnotizbuch.
Wechseln Sie zwischen zwei ursprünglichen Allokationsmodellen und sortieren Sie die Prozentwerte, während die Farben den Anlageklassen zugeordnet bleiben.
Offline-Interpretation von HTML mit nativen Elementen, basierend auf zitierten historischen MDS-Allokationsfarben und einer Systemschriftart. Keine MDS-Vue-Laufzeitumgebung, keine proprietären Bewertungen und keine aktuellen Anlagedaten. · Implementierungsreferenz
02
Morningstar Designsystem Designreferenz
Aktuelle Einführung von Vue 3 und Intrinsic-Richtlinien von 2025, ergänzt durch explizit versionierte Referenzen auf öffentliche Konstanten. Die numerischen Werte aus v2.37 dienen nur als historische Referenz und sind keine Angaben zum aktuellen Vue-3-Paket. Das Beispiel verwendet die zitierten historischen Diagrammfarben und ein eigenes Anwendungslayout.
Morningstar Designsystem Ein Forschungsnotizbuch mit vergleichbaren Zahlen im Mittelpunkt
Tabellen enthalten die exakten Werte
Das ursprüngliche Beispiel zeigt zwei fiktive Allokationsmodelle, einen gestapelten Balken und eine Tabelle mit exakten Werten. Die visuelle Leiste veranschaulicht die relative Zusammensetzung; für das genaue Ablesen maßgeblich bleibt die Tabelle. Jedes Modell ergibt insgesamt 100 %, und das ausgewählte Modell wird sowohl in der Überschrift als auch in der Tabellenbeschriftung genannt.
Durch Sortieren ändert sich die Reihenfolge der Zeilen, nicht aber der Nenner oder die Farben der Anlageklassen. Leserinnen und Leser können so von einem allgemeinen Eindruck der Allokation zum exakten Prozentwert wechseln, ohne ein proprietäres Bewertungssymbol deuten zu müssen. Das ist eine konkrete Rechercheinteraktion, kein erfundenes Morningstar-Produkt und keine Empfehlung.
Morningstar Designsystem Konstanten haben festgelegte Rollen und Versionsgrenzen
Nicht jeden Grauton in ein Text-Token umwandeln
MDS unterscheidet rollenbasierte Konstanten von allgemeinen Farben. Der Entwicklerleitfaden trennt ausdrücklich eine Textfarbe von einem allgemeinen Neutralton, wenn derselbe visuelle Wert für ein Element verwendet werden soll, das kein Text ist. Das bereitgestellte Sass-Beispiel verwendet für den Text die Lesefarbe und für eine benutzerdefinierte Tabellenlinie einen allgemeinen Neutralton.
Die Referenztabellen behalten ihre Versionsgrenzen bei: Constants 3.3.0 unterstützt die genannten Textwerte, während das öffentliche v2.37-Archiv die historischen Werte für Allokation und Abstände dokumentiert. Diese Werte sind hilfreich, um eine bestehende Benutzeroberfläche zu verstehen, belegen aber nicht, dass jede aktuelle Vue-3-Konstante identisch aufgelöst wird. Prüfen Sie das autorisierte installierte Paket, bevor Sie eine archivierte Zahl als aktuelle Designvorgabe behandeln.
Morningstar Designsystem Morningstar Intrinsic verändert die Implementierungsgrundlage
Zwei Schriftschnittfamilien, aufeinander abgestimmte Komponentenaktualisierungen
Laut der Ankündigung von Intrinsic aus dem Jahr 2025 werden die früheren Bezeichnungen Thin, Light und Regular der Schrift Regular zugeordnet, Bold und Heavy der Schrift Bold. Eine Aktualisierung allein der font-family-Deklaration bildet diese Migration nicht ab: Die Ankündigung fordert auch Aktualisierungen an Komponenten, darunter an den Schrift- und Typografiepaketen.
Der alte Monolith morningstar-design-system und Morningstar Base Charts erhalten keine Intrinsic-Aktualisierungen. Neue Beispiele sollten diese archivierten Installationswege nicht mit aktuellen Vue-3-Anweisungen kombinieren. Das Offline-Notizbuch verwendet eine Systemschrift als Fallback und bindet keine proprietären Schriftdateien ein.
Auswahl, verschachtelte Überschriften und Seitennavigation sind separate Aufgaben
MDS stellt Tabellenelemente zur Zusammenstellung bereit, statt alle Datenoperationen in ein einziges undurchsichtiges Raster zu zwingen. Die dokumentierten Muster unterstützen Zeilennummern, Slots für verschachtelte Überschriften, Mehrfachauswahl und Seitennavigation. Die Anwendung bleibt für ihre Datentransformationen und den Auswahlzustand selbst verantwortlich.
Das bereitgestellte funktionierende Beispiel verwendet bewusst eine native Tabelle mit Stilen auf Basis von Konstanten. Die dokumentierte MDS-Zusammenstellungsreferenz bleibt nützlich, wenn Sie zur nativen Komponentenfamilie wechseln: Eine teilweise Auswahl gehört in den unbestimmten Zustand der Kopfzeile, und jedes Zeilenkästchen benötigt ein multiselection-label, das die Zeile eindeutig kennzeichnet.
Prozentwerte bis zur Formatierung für die Anzeige numerisch belassen; formatierte Zeichenfolgen nicht sortieren.
Zahlenüberschriften wie die zugehörigen Zellen rechtsbündig ausrichten.
Die Bezeichnung der Anlageklasse beim Sortieren beibehalten; Indexpositionen sind keine stabilen Datensatzkennungen.
Morningstar Designsystem Farben der Anlageklassen sind keine allgemeine Dekoration
Feste Bedeutung und eine gleichwertige Textdarstellung verwenden
Die historische Allokationspalette unterscheidet Aktien, festverzinsliche Anlagen, Barmittel, alternative Anlagen und nicht klassifizierte Positionen. Im Beispiel bleiben die drei relevanten Anlagenfarben den jeweiligen Anlageklassen zugeordnet, auch wenn sich das Modell oder die Zeilenreihenfolge ändert. Die Farben wechseln nicht je nachdem, welches Segment zufällig an erster Stelle steht.
Eine Tabelle enthält jeden Wert noch einmal in Textform. Daher muss niemand Blau, Orange und Grün unterscheiden können, um das Modell zu verstehen. Das Beispiel verzichtet auf Morningstar-Sterne, Medaillensymbole und Style-Box-Grafiken: Laut der offiziellen Symbolreferenz sind Symbole mit geistigem Eigentum ihren etablierten Bedeutungen vorbehalten.
Morningstar Designsystem Historisches Rastermaß und Anwendungslayout getrennt behandeln
Eine kompakte, gut lesbare Oberfläche ohne ausgeblendete Spalten
Das Archiv dokumentiert einen Grundabstand von 8 Pixeln sowie Viertel- und Halbschritte. Das Beispiel verwendet einen zurückhaltenden Rhythmus von 8/16/24/32, der von dieser historischen Referenz inspiriert ist. Gesamtbreite, Höhe des gestapelten Balkens und mobiler Schwellenwert sind eigene Entscheidungen für die Anwendung und keine erfundenen offiziellen Konstanten.
Die Tabelle enthält nur drei Spalten: Anlageklasse, Prozentwert und Vergleichsbalken. Bei schmalen Ansichten wird der kleine Vergleichsbalken ausgeblendet; Anlageklasse und exakter Prozentwert bleiben sichtbar. Der Modellauswahlschalter bleibt über den Daten, seine Beschriftung ist weiterhin sichtbar. Es gibt keinen unbeschrifteten Filter, der nur aus einem Symbol besteht.
Morningstar Designsystem Die aktuelle Paketgeneration innerhalb der Zugriffsgrenzen übernehmen
Die tatsächlichen Ressourcen konfigurieren, bevor das Produkt gestaltet wird
Autorisierte Teams können die dokumentierte interne Registry, den Vue-3-Paketsuffix und die Sass-Einrichtung verwenden. CSS Module kapseln Komponentenstile, damit verschiedene Versionen nebeneinander bestehen können; das Beispiel verwendet einen produktspezifischen Namensraum. Gehostete Schriftressourcen müssen konfiguriert werden, bevor sie in den Stilen verwendet werden.
Für die öffentliche Vorschau ist keiner dieser Zugriffe erforderlich. Sie ist eine vollständige, unabhängige HTML Demonstration der Allokationsinteraktion mit historischen, durch Quellen belegten Farben und einem expliziten Fallback auf Systemschriften. Das separate Vue-Beispiel zeigt einen konkreten Übernahmeweg auf Basis von Konstanten; es bedeutet nicht, dass diese Seite Zugriff auf die Registry oder Schriftressourcen gewähren kann.
Zugriff auf die genehmigte interne Registry und die Schriftressourcen bestätigen und anschließend die oben gezeigte gekapselte Projektkonfiguration erstellen.
Den Sass-Einstiegspunkt vor der Anwendungskomponente kompilieren und das vollständige App.vue-Beispiel einbinden.
Wechseln Sie in der Vorschau das Allokationsmodell, sortieren Sie in beide Richtungen und prüfen Sie, ob Beschriftungen, Werte und Gesamtsumme synchron bleiben.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Offline-Interpretation mit nativer HTML-Darstellung unter Verwendung zitierter historischer MDS-Allokationsfarben und einer Systemschrift. Keine MDS-Vue-Laufzeitumgebung, proprietären Bewertungen oder aktuellen Anlagedaten.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Allocation notebook — MDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#1e1e1e;font:16px/1.45 Arial,sans-serif}.app{max-width:1100px;margin:auto;padding:32px}.mast{border-bottom:2px solid #333;display:flex;justify-content:space-between;padding-bottom:16px;gap:16px}.mast b{letter-spacing:.06em}.mast span,.muted{color:#5e5e5e;font-size:13px}h1{font-size:36px;font-weight:400;line-height:1.2;margin:28px 0 10px}.intro{max-width:600px;color:#5e5e5e;margin:0 0 24px}.controls{background:#f2f2f2;display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:24px}select{font:inherit;padding:8px 32px 8px 10px;background:white;border:1px solid #808080;border-radius:2px}button:focus-visible,select:focus-visible{outline:3px solid #006fba;outline-offset:3px}.chart{display:grid;grid-template-columns:1fr 90px;gap:24px;align-items:center;margin:28px 0 32px}.stack{display:flex;height:42px;overflow:hidden}.segment{min-width:0}.total{text-align:right;font-size:30px}.total small{display:block;font-size:11px;color:#5e5e5e}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-top:12px}.legend i{display:inline-block;width:8px;height:8px;margin-right:6px}table{width:100%;border-collapse:collapse}caption{text-align:left;font-size:20px;padding-bottom:12px}th,td{padding:16px 8px;border-bottom:1px solid #e5e5e5;text-align:left;font-weight:400}thead th{border-top:2px solid #333;border-bottom:1px solid #808080;font-size:13px}.numeric{text-align:right;font-variant-numeric:tabular-nums}.sort{border:0;background:none;color:#006fba;cursor:pointer;padding:0;font:inherit;text-align:right}.spark{width:35%}.track{height:6px;background:#f2f2f2}.fill{height:6px}.status{font-size:12px;min-height:20px;color:#5e5e5e}.foot{margin-top:32px;padding-top:16px;border-top:1px solid #ccc;font-size:12px;color:#5e5e5e}@media(max-width:600px){.app{padding:20px}.mast{flex-direction:column;gap:4px}h1{font-size:30px}.controls{align-items:flex-start;flex-direction:column;gap:8px}.chart{grid-template-columns:1fr 70px;gap:12px}.spark{display:none}.numeric{width:35%}th,td{padding:16px 4px}.legend{gap:10px}}</style><main class="app"><header class="mast"><b>RESEARCH NOTEBOOK</b><span>Independent MDS interpretation</span></header><h1>One model. Every allocation.</h1><p class="intro">Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.</p><div class="controls"><label for="model">Sample model</label><select id="model"><option value="balanced">Balanced sample</option><option value="reserve">Reserve sample</option></select><span class="muted">No market data or investment recommendation</span></div><div class="chart"><div><div class="stack" id="stack" aria-hidden="true"></div><div class="legend"><span><i style="background:#1f55a5"></i>Equity</span><span><i style="background:#ef7622"></i>Fixed income</span><span><i style="background:#518428"></i>Cash</span></div></div><div class="total">100<small>PERCENT TOTAL</small></div></div><table><caption id="caption">Balanced sample allocation</caption><thead><tr><th scope="col">Asset class</th><th scope="col" id="sorthead" class="numeric" aria-sort="descending"><button class="sort" id="sort">Allocation (%) ↓</button></th><th scope="col" class="spark">Share of model</th></tr></thead><tbody id="rows"></tbody></table><p class="status" id="status" role="status">Sorted by allocation, highest first.</p><p class="foot">Historical MDS v2.37 allocation colors; original application layout and system-font fallback. No Morningstar ratings, proprietary font assets or native Vue components are included.</p></main><script>const models={balanced:[55,35,10],reserve:[20,45,35]},assets=[{name:'Equity',color:'#1f55a5'},{name:'Fixed income',color:'#ef7622'},{name:'Cash',color:'#518428'}];let ascending=false;const model=document.querySelector('#model');function render(){const entries=assets.map((a,i)=>({...a,value:models[model.value][i]}));document.querySelector('#stack').innerHTML=entries.map(a=>`<div class="segment" style="width:${a.value}%;background:${a.color}"></div>`).join('');document.querySelector('#caption').textContent=model.selectedOptions[0].textContent+' allocation';document.querySelector('#rows').innerHTML=[...entries].sort((a,b)=>ascending?a.value-b.value:b.value-a.value).map(a=>`<tr><th scope="row">${a.name}</th><td class="numeric">${a.value.toFixed(1)}%</td><td class="spark"><div class="track"><div class="fill" style="width:${a.value}%;background:${a.color}"></div></div></td></tr>`).join('');document.querySelector('#sorthead').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Allocation (%) '+(ascending?'↑':'↓');document.querySelector('#status').textContent='Sorted by allocation, '+(ascending?'lowest first.':'highest first.')}model.onchange=render;document.querySelector('#sort').onclick=()=>{ascending=!ascending;render()};render();</script></html>
Die Allokationswerte sind fiktiv. Die Farben der Anlageklassen behalten beim Sortieren ihre jeweilige Bedeutung. Dieses Dokument enthält keine proprietären MDS-Vue-Assets oder Intrinsic-Schriftarten.
Eine vollständige sortierbare Tabelle mit explizitem Nenner
Eine Vue-3-Tabelle verwendet native Semantik und die oben beschriebene Einrichtung der visuellen MDS-Sprache. Beim Sortieren bleiben die Zahlenwerte erhalten, und die Sortierrichtung wird angezeigt.
vue
<!-- src/App.vue — native table styled with MDS constants, not MdsTable -->
<script setup>
import {computed,ref} from 'vue';
const ascending=ref(false);
const rows=[{name:'Sample Equity',allocation:55},{name:'Sample Bonds',allocation:35},{name:'Sample Cash',allocation:10}];
const sorted=computed(()=>[...rows].sort((a,b)=>ascending.value?a.allocation-b.allocation:b.allocation-a.allocation));
</script>
<template>
<main><h1>Research notebook</h1><p>Fictional allocation; not an investment recommendation.</p>
<table><caption>Sample allocation, total 100%</caption><thead><tr><th scope="col">Asset</th><th scope="col" class="numeric" :aria-sort="ascending?'ascending':'descending'"><button type="button" @click="ascending=!ascending">Allocation (%) {{ascending?'↑':'↓'}}</button></th></tr></thead>
<tbody><tr v-for="row in sorted" :key="row.name"><th scope="row">{{row.name}}</th><td class="numeric">{{row.allocation.toFixed(1)}}%</td></tr></tbody></table>
<p role="status">Sorted by allocation, {{ascending?'lowest first':'highest first'}}.</p></main>
</template>
Verwenden Sie für Diagramme separat abgegrenzte MCE-Konstanten, statt anzunehmen, dass sich MDS-Überschreibungen auf Diagramme übertragen.
04
Morningstar Designsystem Agenteneinrichtung
Ausgangspunkt für die Implementierung
Einrichtung einer beschränkten Registry für autorisierte Teams. Der Schriftartenpfad muss auf lizenzierte Dateien verweisen, die tatsächlich von der Anwendung bereitgestellt werden. Zusammen mit dem folgenden App.vue verwenden. Dies ist eine native HTML-Tabelle auf Konstantenbasis – keine Behauptung, dass MDS-Pakete öffentlich verfügbar sind oder die native Kompilierung überprüft wurde.
Shell / JavaScript / SCSS
# Authorized Morningstar teams only: project .npmrc
@mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
@mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/
# Within a Vite Vue 3 project with approved registry access
pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3
pnpm add -D sass
// vite.config.js
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins:[vue()],
css:{modules:{generateScopedName:'[local]___researchNotebook'}}
});
// src/main.js
import {createApp} from 'vue';
import './main.scss';
import App from './App.vue';
createApp(App).mount('#app');
// src/main.scss — host licensed font files at this application path first
@use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic');
@use '@mds/fonts-vue3';
@use '@mds/constants-vue3' as *;
@use '@mds/typography-vue3' as *;
h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; }
p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; }
main { margin:$mds-space-4-x; }
table { width:100%;border-collapse:collapse; }
th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; }
.numeric { text-align:right;font-variant-numeric:tabular-nums; }
button { font:inherit;cursor:pointer; }
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie ein von Morningstar inspiriertes Recherche-Notizbuch und beachten Sie dabei die in diesem Leitfaden ausdrücklich genannten Versionsgrenzen. Führen Sie exakte Allokationswerte in einer semantischen Tabelle auf und ordnen Sie die Farben fest den jeweiligen Anlageklassen zu. Erfinden Sie keine Bewertungen und verwenden Sie IP-Symbole nicht als Dekoration. Verwenden Sie die aktuelle autorisierte Konfiguration für Vue 3, Konstanten und Schriftarten nur mit genehmigtem Zugriff; andernfalls kennzeichnen Sie die Offline-Implementierung eindeutig.
05
Morningstar Designsystem Quellen und Geltungsbereich
Unabhängiger OpenDesign-Leitfaden. Die Allokationsbeispiele sind fiktiv und stellen keine Finanzberatung dar. Historische numerische Konstanten sind mit ihrer Quellversion gekennzeichnet. Der aktuelle Zugriff auf Pakete und Schriftarten unterliegt weiterhin den Zugriffskontrollen von Morningstar.
