Astro

Framework

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@latest

Components

figma

npm create astro@latest

HOME

PRODUCTS

ABOUT

npm create astro@latest

HOME

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

Øvelse

Lav koden om til genbrugelige components.

  • Opret en components-mappe i /src
  • Lav components
    • Header.astro
    • Hero.astro
    • CardSection.astro
    • Card.astro
    • Button.astro
    • Footer.astro
  • Importer og brug components på index.astro

Components

Se ressourcer på Fronter