😸
laravel 12 starter kit(react)のui(shadcn/ui)以外に最初からあるcomponentの使い方
resources/js/components/ 以下
resources/js/components/
├── appearance-dropdown.tsx
├── appearance-tabs.tsx
...
└── ui
├── alert.tsx
├── avatar.tsx
...
このような構成で諸々配置されている。
この中でresources/js/components/ui/ 以下は shadcn/ui(vueでは shadcn-vue)のファイルになっている。これに関しては後日解説を書くとして、その上位に追いてあるコンポーネントをどのように呼び出すとよいかという点にフォーカスした記事にしている。といっても大量にあるけど実際には3つ(4つ)しかない。
ヘッダ系 (heading.tsx, heading-small.tsx)
<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading title="Heading: components/ui/alert.tsx" />
<HeadingSmall title="HeadingSmall: components/ui/alert.tsx" />
こんな感じでmargin付きのヘッダーが与えられてh2とかをベタで書くより調整される。それとdescriptionがある
<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading
title="Heading: components/ui/alert.tsx"
description="This is a primary heading used for main sections."
/>
<HeadingSmall
title="HeadingSmall: components/ui/alert.tsx"
description="This is a secondary heading used for smaller sections."
/>
このようにタイトル + 説明というデザインで統一できるので、h2、h3を使うなら使っといてもいいかもしれない。
TextLinkコンポーネント
<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<Heading title="components/ui/alert.tsx" />
<p>
<strong>TextLink:</strong>{' '}
<TextLink href="#">Link</TextLink>
</p>
<p>
<strong>A tag:</strong>{' '}
<a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
Link
</a>
</p>
</div>
結構シンプルさがある。
中身は
<Link
className={cn(
'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
className
)}
{...props}
>
{children}
</Link>
このようにダークモード対応になっている。このcn
[1]によりクラスをmergeできる。たとえば赤にする場合
<p>
<strong>TextLink:</strong>{' '}
<TextLink href="#">Link</TextLink>
</p>
<p>
<strong>TextLink (Red):</strong>{' '}
<TextLink href="#" className="text-red-500">Link</TextLink>
</p>
<p>
<strong>A tag:</strong>{' '}
<a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
Link
</a>
</p>
となるわけだ。
InputError
これは基本的にフォームと一緒に使われるのだが、基本的にエラーメッセージが無いときは出ないようになっている。
<div className="space-y-2">
<Label htmlFor="example-input">Example Input</Label>
<Input
id="example-input"
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onBlur={validateInput}
className="w-full"
/>
<InputError message={error} />
</div>
これは後日formの組み立て型と一緒に解説するつもりだが(余裕あれば)、このようにdefaultでは赤を基調とした色でエラーメッセージを出す仕様になっている。
その他のコンポーネントを含むまとめ
レイアウトを弄るとか以外の自作のビューで呼び出されるのはここまでで紹介したコンポーネントでほとんど完了する(もちろん自分で追加してもよいが、あくまで最初から配置されているものの解説)。それ以外を以下の表でまとめる。
コンポーネント名 | 説明 | 主な用途 |
---|---|---|
appearance-dropdown.tsx | テーマ切り替え用のドロップダウンメニューを提供する | ダークモード/ライトモードの変更 |
appearance-tabs.tsx | テーマ切り替え用のタブUIを提供する | テーマ設定 |
app-content.tsx | レイアウトのコンテンツ部分を管理 |
main エリアの管理 |
app-header.tsx | アプリケーションのヘッダー部分 | ナビゲーションやアバターの表示 |
app-logo-icon.tsx | アプリケーションのロゴアイコンを提供 | 小サイズのロゴ表示 |
app-logo.tsx | アプリケーションのロゴコンポーネント | メインロゴの表示 |
app-shell.tsx | アプリケーション全体のレイアウト管理 | レイアウト全体の構成 |
app-sidebar-header.tsx | サイドバーのヘッダー部分 | サイドバーのタイトルや操作ボタン |
app-sidebar.tsx | アプリケーションのサイドバー | メニューやナビゲーションの管理 |
breadcrumbs.tsx | パンくずリストの表示 | ユーザーが現在のページを確認 |
delete-user.tsx | ユーザーアカウント削除のUI | アカウント削除の確認と実行 |
heading-small.tsx | 小サイズの見出しコンポーネント | セクションタイトルの表示 |
heading.tsx | 通常サイズの見出しコンポーネント | 大きめのセクションタイトル表示 |
icon.tsx | アイコンコンポーネント | 汎用的なアイコン表示 |
input-error.tsx | 入力エラー表示 | フォームエラーの表示 |
nav-footer.tsx | フッターナビゲーション | ドキュメントや外部リンクの表示 |
nav-main.tsx | メインナビゲーション | メインのメニュー項目管理 |
nav-user.tsx | ユーザーナビゲーション | ユーザー情報や設定メニュー |
text-link.tsx |
a タグのラッパー |
スタイル付きのリンク表示 |
user-info.tsx | ユーザー情報表示 | ユーザーのアイコンと名前を表示 |
user-menu-content.tsx | ユーザーメニューの内容 | 設定やログアウトメニュー |
結局
同じディレクトリにばばっと置いてあるのでちょっとわかり辛いんだよね...
-
resources/js/lib/utils.tsに存在 ↩︎
Discussion