Astro
Recap
Digitalt Design,
3. semester
Tekst & billeder
Farver
Æstetik og stemning
Interaktioner
Knapper
fag-briller
Components
Design Patterns
Grid System
Design Tokens
Hierarki
Components
Design Patterns
Hierarki
Grid System
Design Tokens
Figma
ASTRO
X
Components
Figma
ASTRO
X
Components
<Button>Knap</Button>
npm create astro@latest
Components
npm create astro@latestComponents
figma
npm create astro@latest
HOME
PRODUCTS
ABOUT
npm create astro@latestHOME
PRODUCTS
ABOUT
<Button variant="secondary">Action</Button>secondary
primary
secondary
primary
---
const { variant } = Astro.props;
---
<button class={variant}>
<slot />
</button>
<style>
.secondary {
background: red;
}
</style>dynamisk
skabelon
<Button variant="secondary">Knap</Button>
<Button variant="secondary">Knap</Button>Prop
s
ertie
<Button variant="secondary">Knap</Button>Prop
s
ertie
Component
<Button variant="secondary">Send</Button><button class="secondary">Send</button>VS Code
Browser
<Button hasIcon={true}>Send</Button><button>
<span>Send</span>
<svg>...</svg>
</button>VS Code
Browser
<Button link="/send" hasIcon={true}>Send</Button><a href="/send">
<span>Send</span>
<svg>...</svg>
</a>VS Code
Browser
Hvis "link", skift til korrekt HTML-tag
<Button variant="primary"
hasIcon={true}
icon="arrow-right"
link="/send"
>
Send
</Button><button>
<span>Send</span>
<svg>...</svg>
</button>VS Code
Browser
VS Code
Browser
<ul>
<Card title="Animation"
description="Learn the latest..."
link="/animation"
/>
<!-- flere Cards -->
</ul><!-- ... -->
<ul>
<li>
<h3>Animation</h3>
<p>
Learn the latest animation techniques.
</p>
<a href="/animation" class="ghost">
Get started
</a>
</li>
<!-- flere Cards -->
</ul>
<!-- ... -->Button.astro
<li>
<h3>{title}</h3>
<p>
{description}
</p>
<Button variant="ghost">Get started</Button>
</li>Button.astro
---
import Button from "./components/Button.astro"
---
<li>
<h3>{title}</h3>
<p>
{description}
</p>
<Button variant="ghost">Get started</Button>
</li>
---
import Button from "./components/Button.astro"
---
<li>
<h3>{title}</h3>
<p>
{description}
</p>
<Button variant="ghost">Get started</Button>
</li>"import"
---
import Button from "./components/Button.astro"
---
<li>
<h3>{title}</h3>
<p>
{description}
</p>
<Button variant="ghost">Get started</Button>
</li>Nested component
Components
Hvor ser vi components?
Components
Hvor ser vi components?
Header.astro
Button.astro
Footer.astro
Card.astro
CardSection.astro
Hero.astro
Components
Hvad er den bygget op af?
Ikon
Titel
Knap
Beskrivelse
Components
Hvad er den bygget op af?
Ikon
Titel
Knap
Beskrivelse
Components
Brug Card
Ikon
Titel
Knap
Beskrivelse
<ul>
<Card iconName="running-man"
title="Animation"
description="Learn the latest..."
link="/animation"
/>
<!-- ... -->
</ul>Components
Brug Card
<ul>
<Card iconName="img"
title="Design"
description="Create beautiful, usable..."
link="/design"
/>
<!-- ... -->
</ul>Components
Styling af Card
<!-- Astro Props & HTML for Card -->
<style>
li {
display: flex;
flex-flow: column;
aspect-ratio: 1;
padding: 2rem;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>Components
Styling af Card
<!-- Astro Props & HTML for Card -->
<style>
li {
display: flex;
flex-flow: column;
aspect-ratio: 1;
padding: 2rem;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>Påvirker kun `li` i Card, ikke andre
Components
Styling af Card
<!-- Astro Props & HTML for Card -->
<style>
h3 {
color: #000;
font-size: 1.25rem;
margin: 0;
}
</style>Påvirker kun `h3` i Card, ikke andre
Astro Recap Digitalt Design, 3. semester