ui:text

テキスト文章の表示に利用する汎用的なTextコンポーネントです。テキスト文章として必要なリンクスタイルやアイコンスタイルが適用されます。

Examples

Default

Source Code

<p class="ui:text">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>

Sizes

font-sizeの変更は、utility classを利用します。デフォルトは親要素のスタイルを継承します。

Source Code

<div class="grid gap-4">
  <p class="ui:text text-xs">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text text-sm">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text text-lg">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
</div>

Trim Half-Leading

Source Code

<div class="grid gap-4">
  <p class="ui:text" data-trim>テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <p class="ui:text" data-trim>テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <p class="ui:text" data-trim>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

Variants

属性	要素	値	効果
data-trim	root	-	half-leadingの除外

Behavior

リンクアイコンの自動付与

TBD