Section 1

コンポーネントを利用する

Astro SarkaraにはいくつかのAstroコンポーネントを用意しています。これを利用するには、Astroコンポーネント内のフロントマターでインポートを行います。また同様にMDXファイル内でも使用することができます。

---
import {
  Badge,
  Button,
  IconButton,
  Link,
  PanelLink,
  Paper,
  PaperLink,
} from "@cieloazul310/astro-sarkara";
---

基本コンポーネント

Alert

アラートを表示するコンポーネント。

<Alert status="success" title="Good job!">成功しました。</Alert>
<Alert status="info">AstroはTypeScriptにデフォルトで対応しています。</Alert>
<Alert status="warning">`mjs`と`cjs`が混在しないように注意してください</Alert>
<Alert status="danger" title="Error">失敗です。</Alert>
<Alert status="tips" title="Tips">コンテンツコレクションを使うことができます。</Alert>

Badge

バッジコンポーネント。

<Badge>Badge</Badge>
<Badge colorPalette="primary">Primary</Badge>
<Badge colorPalette="red" size="md">Red</Badge>
<Badge colorPalette="secondary" as="a" href="/">As link</Badge>

Badge Primary Red As link

Button

ボタンコンポーネント。

<Button>Button</Button>
<Button size="sm" colorPalette="primary">Primary sm</Button>
<Button colorPalette="secondary" visual="outline">
  Outline
</Button>
<Button size="lg" icon="mdi:arrow-right-bold-circle" iconPlace="end">
  With Icon
</Button>
<Button colorPalette="primary" as="a" href="/">
  As Link
</Button>

As Link

IconButton

アイコンボタンコンポーネント。アイコンはastro-iconで実装し、Iconifyでアイコンネームを取得可能です。

<IconButton icon="mdi:menu" />
<IconButton icon="mdi:menu" shape="circle" colorPalette="primary" />
<IconButton icon="mdi:download" visual="outline" colorPalette="secondary" />

Iconify Design

iconify.design

Link

AstroはGatsbyと異なり、リンクのベースパスのプレフィックスを行いません。https://xxx.github.io/base-path/がサイトのURLだとすると、サイト内リンクのすべてに<a href="/base-path/{path}/">のようにベースパスを記載する必要があります。

Astro Sarkaraの<Link>コンポーネントはastro.configで指定されたベースパスを取得し自動的に付与する機能があります。また外部リンクの場合はtarget="_blank"とrel="noreferrer noopener"を自動的に付与します。

この機能は他のリンクコンポーネントにも実装しています。また自作のAstroコンポーネントに使う場合は同様の機能を実装するフックを用意しています。

<Link href="/">Internal</Link>
<Link href="https://panda-css.com/">External</Link>
<Link href="https://panda-css.com/" colorPalette="secondary">Secondary color</Link>

Internal
External
Secondary color

設定方法

docs.astro.build

PanelLink

パネル型のリンクコンポーネント。

<PanelLink href="/">Internal</PanelLink>
<PanelLink href="https://iconify.design/">External</PanelLink>
<PanelLink href="https://iconify.design/" colorPalette="secondary" disableBorder>Disable border</PanelLink>

Internal

External

iconify.design

Disable border

iconify.design

Paper

Astro Sarkaraデザインの基礎となるプライマリーカラーの半透明の背景を持つ<div>要素。

---
import { vstack } from "@cieloazul310/sarkara-css/patterns";
---

<div class={vstack({ gap: 2, alignItems: "stretch" })}>
  <Paper>Paper</Paper>
  <Paper>
    <Paper>Nested</Paper>
  </Paper>
  <Paper colorPalette="secondary">
    Secondary
  </Paper>
</div>

Paper

Nested

Secondary

PaperButton

Paperのスタイルを持ったボタン型のリンク。

---
import { vstack } from "@cieloazul310/sarkara-css/patterns";
---

<div class={vstack({ gap: 2, alignItems: "stretch" })}>
  <PaperLink href="/">Internal</PaperLink>
  <PaperLink href="https://astro.build" colorPalette="secondary">
    External
  </PaperLink>
  <PaperLink href="/" selected>Selected</PaperLink>
</div>

Internal External Selected

Tutorial Top

Top