Text
名前付きのテキストロールを任意の要素に適用するタイポグラフィプリミティブです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | caption, label, body, bodySm, code, headingSm, headingMd, headingLg, display, displayLg | body |
color | default, muted, placeholder, inverse, primary, info, success, warning, danger | 継承 |
as | 任意の要素タイプ | span |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/text.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRText } from '@tinyrack/ui/components/text';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
タイプロール パーマリンク
まず意味からロールを選び、as プロパティで要素を指定して見出しのセマンティクスを保ちます。
セマンティックカラー パーマリンク
意味に応じてカラートークンを選び、color を指定しなければ周囲のテキスト色を継承します。
配置と省略 パーマリンク
論理的な配置はテキスト方向に従い、truncate ははみ出す 1 行を省略記号で切り詰めます。
API
オプション
| Prop | 型 | 既定値 | 用途 |
|---|---|---|---|
variant | 'caption' | 'label' | 'body' | 'bodySm' | 'code' | 'headingSm' | 'headingMd' | 'headingLg' | 'display' | 'displayLg' | 'body' | デザイントークンの名前付きタイプロールを選びます。 |
as | ElementType | 'span' | 視覚的なロールはそのままに、描画する要素だけを変えます。 |
color | 'default' | 'muted' | 'placeholder' | 'inverse' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 継承 | セマンティックカラートークンを適用し、未指定なら親の色を継承します。 |
align | 'start' | 'center' | 'end' | 継承 | 現在の方向に合わせた論理的なテキスト配置を設定します。 |
truncate | boolean | false | はみ出す 1 行を省略記号（…）で切り詰めます。 |
weight | 'regular' | 'medium' | 'heading' | 'bold' | 'strong' | ロール既定値 | variant の既定のフォントウェイトを上書きします。 |
HTML とアクセシビリティ
TRText は既定で span をレンダリングし、ネイティブ属性、イベント、スタイル、React 19 の ref を転送します。as を使うと視覚的な variant とは独立して p、見出し、label などのセマンティック要素をレンダリングでき、見出しが文書構造を保ちます。TRTextProps、TRTextVariant、TRTextColor、TRTextAlign、TRTextWeight 型もエクスポートします。インスタンスごとの上書きは --tr-text-* カスタムプロパティで行えます。