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プロパティに渡されます。初期値:"s"|
|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="info" fxd={["column","row"]}> <Flex ai="center" jc="between" fxd={["column","row"]} g="15"> <p>画面が狭くなるとアイコン・テキスト・ボタンが縦並びになります。</p> <Button href="#" bdrs="10" fxsh="0" fz="s" bgc="link">Button</Button> </Flex></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>