Alert
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
短めの文言を目立たせて強調表示したい時に使えるコンポーネントです。
↓
Preview
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
リサイズ
<Alert> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p></Alert>How to use
@lism-css/ui パッケージでAlertとして提供しています。
Import
import { Alert } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
type | keycolorとiconの組み合わせを呼び出すキーワードを指定できます。初期値:"alert" |
icon | Iconコンポーネントに渡すアイコンを指定できます。 |
keycolor | キーカラーを指定します。 |
flow | コンテンツを囲むFlow要素のflowプロパティに渡されます |
layout | レイアウトプリミティブを切り替えます。初期値:"flex" |
ソースコード
ソースコードは GitHub で公開しています。
Examples
カラーとアイコンを指定する例
↓
例
icon=“good” keycolor=“green”
<Alert icon="good" keycolor="green"> <p>icon="good" keycolor="green"</p></Alert>l--withSide を使ってレスポンシブ対応
↓
Preview
画面が狭くなるとアイコンとテキストが縦並びになります。
リサイズ
<Alert type="check" layout="withSide"> <p>画面が狭くなるとアイコンとテキストが縦並びになります。</p></Alert>ボタン付き + ブレイクポイントによるレスポンシブ対応
↓
Preview
画面が狭くなるとアイコン・テキスト・ボタンが縦並びになります。
Button リサイズ
<Alert type="check" layout="withSide"> <p>画面が狭くなるとアイコン・テキスト・ボタンが縦並びになります。</p></Alert>l--withSide を使ったレスポンシブ対応
↓
Preview
画面が狭くなるとアイコンとテキストが縦並びになります。
リサイズ
<Alert layout="withSide"> <p>画面が狭くなるとアイコンとテキストが縦並びになります。</p></Alert>type一覧
↓
typeの指定
type=“alert”: Example text.
type=“point”: Example text.
type=“warning”: Example text.
type=“check”: Example text.
type=“info”: Example text.
type=“help”: Example text.
type=“note”: Example text.
リサイズ
<Alert type="alert">...</Alert><Alert type="point">...</Alert><Alert type="warning">...</Alert><Alert type="check">...</Alert><Alert type="info">...</Alert><Alert type="help">...</Alert><Alert type="note">...</Alert>Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Alert を構築するコード例を紹介します。
↓
Preview
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
リサイズ
<WithSide util="cbox" keycolor="red" ai="center" p="15" g="15" bd bdrs="10"> <Center isSide c="keycolor" fz="xl"> <Icon icon="alert" /> </Center> <Flow flow="s"> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p> </Flow></WithSide>