⚠️ Still in β. Lightモードで御覧ください。
Docs
Components
Alert

Alert

短い文言を目立たせて表示したい時に使えるコンポーネントです。

対応するHTML構造
<div class="c--alert l--fluidFix" data-fix="first">
	<div class="c--alert__icon l--center">
		<svg>...</svg>
	</div>
	<div class="c--alert__body">
		<p>...content...</p>
	</div>
</div>

内部で<FluidFix>を使用し、コンテンツ側が16remを下回るとアイコンとコンテンツが縦並びになります。

Props

  • keycolor: 表示カラーを指定します。アイコンは指定した色で表示され、背景やボーダーが指定したカラーをもとにした薄い色で表示されます。
    • (color-mixで薄い色の生成をしているため、未対応ブラウザでは表示が変わります。)
  • icon: アイコン表示用のコンポーネントを指定できます。
  • iconSize: アイコンのサイズを指定できます。
  • iconLabel: アイコンのaria-labelを指定できます。
  • preset: keycolorとicon, iconLabelの組み合わせのプリセット値を、いくつか用意しています。
  • isFlow: __bodyに渡されます

preset → type ...?

Astroでアイコンの受け渡しどうする...。（jsxコンポーネントであれば問題なし。）

Import

import { Alert } from '@loos/lism-core';

DEMO

デフォルト (preset="alert"が初期セットされています)

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

<Alert preset="info">...text...</Alert>

icon, color を指定

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sunt deserunt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sunt deserunt

import { Book } from "@phosphor-icons/react";
 
<Alert icon={Book} color="accent">...text...</Alert>
 
<Alert icon="star" keycolor="pink" >...text...</Alert>

isFlowの指定

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば。

<Alert isFlow='s'>
	<p>...</p>
	<p>...</p>
</Alert>

プリセット

  • "note"
  • "alert"
  • "danger"
  • "warning"
  • "check" ( ≒ "success")
  • "help"
  • "point"
  • "info",
  • "good"
  • "bad"
  • "reference"

presets

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。

リサイズ可能エリアです ↑
<Alert preset="alert">
	...text...
</Alert>
<Alert preset="point">
	...text...
</Alert>
<Alert preset="warning">
	...text...
</Alert>
...
BadgeNote