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

Source Code

<div class="grid gap-4">
  <p class="ui:text" data-size="xs">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text" data-size="sm">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text" data-size="md">テキストが入ります。テキストが入ります。<a href="#" target="_blank">リンクテキスト<ui-icon data-icon="external-link" aria-label="別ウィンドウで開きます"></ui-icon></a>テキストが入ります。</p>
  <p class="ui:text" data-size="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-size	root	xs, sm, md (default), lg	フォントサイズの指定
data-trim	root	-	half-leadingの除外

Behavior

Styles

• テキスト文章として、必要なリンクスタイルやアイコンスタイルが適用されます。
• font-size, line-height は、個別指定も可能ですが、デフォルトは親要素のスタイルを継承します。

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

TBD