Raku - コンポーネントガイド

ボタン

ボタンは以下のようにシンプルに実装できます：


            <button>デフォルトボタン</button>
            <button class="primary">プライマリボタン</button>
            <button class="secondary">セカンダリボタン</button>

カード

カードコンポーネントは以下のように実装できます：


            <div class="card">
            <h3>カードタイトル</h3>
            <p>カードの内容</p>
            <button>詳細</button>
            </div>

カードタイトル

カードの内容

アラート

アラートは以下のように実装できます：


            <div alert-type="primary">プライマリアラート</div>
            <div alert-type="error">エラーアラート</div>

プライマリアラート

エラーアラート

グリッド

グリッドレイアウトは以下のように実装できます：


            <div class="grid">
            <div>グリッドアイテム1</div>
            <div>グリッドアイテム2</div>
            <div>グリッドアイテム3</div>
            </div>

グリッドアイテム1

グリッドアイテム2

グリッドアイテム3

フォーム

フォーム要素は以下のように実装できます：


            <form>
            <label for="name">名前:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">
            <input type="email" id="email" name="email" required>