コンポーネント

コンポーネントはページの再利用可能な構成要素です。

コンポーネントの作成

components/ディレクトリにVファイルを作成：

// components/callout.v
module components

pub struct Callout {
pub:
    type_   string  // info, warning, success, error
    content string
}

pub fn (c Callout) render() string {
    icon := match c.type_ {
        'info' { '💡' }
        'warning' { '⚠️' }
        'success' { '✅' }
        'error' { '🚨' }
        else { 'ℹ' }
    }
    return '<div class="callout callout-${c.type_}">${icon} ${c.content}</div>'
}

コンポーネントの使用

.vdxファイルでHTMLライクな構文でコンポーネントを使用：

<Callout type_="info">
これは情報メッセージです。
</Callout>

typeはVの予約キーワードなので、アンダースコア付きのtype_を使用してください。

組み込みコンポーネント

Veltプロジェクトには以下のコンポーネントが付属：

コンポーネント	説明	プロップ
`Callout`	アイコン付きアラートボックス	`type_`: info, warning, success, error
`Hero`	ランディングページ用ヒーローセクション	`title`, `subtitle`

子コンテンツ

タグ間のコンテンツはcontentフィールドになります：

<Callout type_="info">
このテキストがcontentフィールドになります。
</Callout>

コンテンツは自動的にMarkdownとして解析されます。