Heading
Beispiel eines yaml-Frontmattters:
---
title: Components
subtitle: vue-components von theme/global-components/
icon: mdi-puzzle
apps: [Microsoft Teams] # für FeaturesRelated
systems: [macOS, Windows]
ict: true # als grundlegende ICT-Kompetenz markieren
order: 4 # Reihenfolge für Menü (Einträge ohne order kommen alphabetisch am schluss)
---AppBox
Zeigt eine Box an mit Title, Icon und Link – optional als QR-Code (statt href einfach qr-Property setzen). Bild muss in public/assets/icons abgelegt sein (siehe AppIcon), Link-Icon wird basierend auf href resp. qr` automatisch gesetzt.
md
<AppBox title="Microsoft Word" icon="word.svg" href="https://apps.apple.com/ch/app/microsoft-word/id586447913" />Microsoft Word
AppIcon
App-Icons mit caption (block) oder ohne caption (inline):
md
<AppIcon icon="word.svg" />
<AppIcon icon="excel.svg" caption="Grünes Icon von Microsoft" />
Folgende Icons stehen zur Verfügung (alle Bilddateien in public/assets/icons):
QR-Code
Beliebiger Inhalt kann als QR-Code generiert werden
md
<QRCode href="Hallo Welt"/>
<QRCode href="https://intern.gymkirchenfeld.ch/userdata/homeoffice-is-great-but-coffee-too"/>https://github.com/scopewu/qrcode.vue?tab=readme-ov-file
FeaturesChildren
Dieser Component extrahiert die Überschriften und icons aller untergeordneten Artikel und zeigt diese an.
<FeaturesChildren />BrowserBox
Das Wort wird fett geschrieben
<BrowserBox>
Das Wort wird **fett** geschrieben
</BrowserBox>ExcelBox
Das Wort wird fett geschrieben
<ExcelBox>
Das Wort wird **fett** geschrieben
</ExcelBox>Download
Download eines öffentlichen intern-Dokumentes via id:
md
<Download id="200809" >PowerPoint-Präsentation</Download>Flex
md
<Flex>
<Download id="200809" >PowerPoint-Präsentation</Download>
<Download id="200810" >Schritart Arimo</Download>
</Flex>Icons
Icons können auch über eine Vue-Komponente eingebaut werden. Somit lassen sie sich mit Farbe, Grösse und caption versehen:
test
md
<Flex>
<Icon icon="mdi-file-word" size="2.6rem" color="#00a2ed" caption="test" />
<Icon icon="mdi-account" size="6rem" color="var(--ict-c-gymer)" />
:mdi-account:
</Flex>