@designsystem-se/af-angular
v34.0.3
Published
Angular Components for Digi Designsystem
Downloads
706
Readme
Kom igång
Installera designsystemet genom att köra en av följande rader
# React
npm install @designsystem-se/af-react @designsystem-se/af
# Angular
npm install @designsystem-se/af-angular @designsystem-se/af
# Inget ramverk
npm install @designsystem-se/afLägg till följande rader i projektets globala css-fil
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';Det var allt! 🚀
Exempel
React
// App.tsx
import { DigiButton } from '@designsystem-se/af-react';
import { ButtonVariation } from '@designsystem-se/af';
export function App() {
const handleClick = () => console.log('👋 Hallå Världen');
return (
<DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
Hälsa
</DigiButton>
);
}Angular
// app.component.ts
import { Component } from '@angular/core';
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
import { ButtonVariation } from '@designsystem-se/af';
@Component({
selector: 'app-root',
standalone: true,
imports: [DigiArbetsformedlingenAngularModule],
templateUrl: './app.component.html'
})
export class AppComponent {
buttonVariation = ButtonVariation.PRIMARY;
handleClick() {
console.log('👋 Hallå Världen');
}
}<!--app.component.html-->
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
>Hälsa</digi-button
>Old School
<!--index.html-->
<!doctype html>
<html>
<head>
<link
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
<link
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
<script
type="module"
src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js"></script>
</head>
<body>
<digi-button af-variation="primary">Hälsa</digi-button>
<script>
let btn = document.querySelector('digi-button');
btn.addEventListener('afOnClick', () => {
console.log('👋 Hallå Världen');
});
</script>
</body>
</html>Bidra till Designsystemet
Är du nyfiken på att hjälpa till med att bygga ett av sveriges mest tillgängliga och flexibla designsystem? Say no more. ✨
Vi behöver hjälp med allt ifrån kod, design, tillgänglighetsarbete, copywriting och marknadsföring.
- Läs Contribution Guidelines
- Kolla igenom issue tracker. 💡 Nybörjartips, filtrera efter "Mindre uppgift"
Kommunikation & Forum
⚠️ Observera: Dela inte känslig information eller personuppgifter. Allting i GitLab är tillgängligt för alla besökare. Vid övriga ärenden var god använd kontaktuppgifter som finns tillgängliga på dokumentationswebben.
Har du upptäckt ett problem med designsystemet? Skapa issue 🐛
Tycker du att något saknas i designsystemet? Skicka in önskemål 🎁
Har du fastnat på något som inte känns helt rätt eller är oklart? Ställ fråga 🙋
Om designsystemet
Designsystemet är välbeprövat i myndighetsvärlden sen flera år tillbaka. Komponenterna visas flera miljoner gånger per månad till olika användare.
Team Designsystem @ Arbetsförmedlingen 2025