This repository was archived by the owner on May 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents-guide.html
More file actions
130 lines (117 loc) · 4.7 KB
/
Copy pathcomponents-guide.html
File metadata and controls
130 lines (117 loc) · 4.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raku - コンポーネントガイド</title>
<link rel="stylesheet" href="raku.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script type="module">
import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.2.0/dist/turbo.es2017-esm.js';
document.addEventListener('turbo:load', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block); // この行を修正
});
});
</script>
</head>
<body>
<header>
<h1>Rakuコンポーネントガイド</h1>
<p>Rakuフレームワークの各コンポーネントの使い方を説明します。</p>
</header>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="#buttons">ボタン</a></li>
<li><a href="#cards">カード</a></li>
<li><a href="#alerts">アラート</a></li>
<li><a href="#grid">グリッド</a></li>
<li><a href="#forms">フォーム</a></li>
</ul>
</nav>
<main>
<section id="buttons">
<h2>ボタン</h2>
<p>ボタンは以下のようにシンプルに実装できます：</p>
<pre><code class="language-html">
<button>デフォルトボタン</button>
<button class="primary">プライマリボタン</button>
<button class="secondary">セカンダリボタン</button>
</code></pre>
<button>デフォルトボタン</button>
<button class="primary">プライマリボタン</button>
<button class="secondary">セカンダリボタン</button>
</section>
<section id="cards">
<h2>カード</h2>
<p>カードコンポーネントは以下のように実装できます：</p>
<pre><code class="language-html">
<div class="card">
<h3>カードタイトル</h3>
<p>カードの内容</p>
<button>詳細</button>
</div>
</code></pre>
<div class="card">
<h3>カードタイトル</h3>
<p>カードの内容</p>
<button>詳細</button>
</div>
</section>
<section id="alerts">
<h2>アラート</h2>
<p>アラートは以下のように実装できます：</p>
<pre><code class="language-html">
<div alert-type="primary">プライマリアラート</div>
<div alert-type="error">エラーアラート</div>
</code></pre>
<div alert-type="primary">プライマリアラート</div>
<div alert-type="error">エラーアラート</div>
</section>
<section id="grid">
<h2>グリッド</h2>
<p>グリッドレイアウトは以下のように実装できます：</p>
<pre><code class="language-html">
<div class="grid">
<div>グリッドアイテム1</div>
<div>グリッドアイテム2</div>
<div>グリッドアイテム3</div>
</div>
</code></pre>
<div class="grid">
<div class="card">グリッドアイテム1</div>
<div class="card">グリッドアイテム2</div>
<div class="card">グリッドアイテム3</div>
</div>
</section>
<section id="forms">
<h2>フォーム</h2>
<p>フォーム要素は以下のように実装できます：</p>
<pre><code class="language-html">
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">
<input type="email" id="email" name="email" required>
</code></pre>
<form>
<div class="form-group">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">送信</button>
</form>
</section>
</main>
</body>
</html>