Alert
短めの文言を目立たせて強調表示したい時に使えるコンポーネントです。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
<Alert> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p></Alert>How to use
@lism-css/ui パッケージでAlertとして提供しています。
Import
import { Alert } from '@lism-css/ui/react';Anatomy
<Alert type="">...CONTENT...</Alert>Props
| プロパティ | 説明 |
|---|---|
type | keycolorとiconの組み合わせを呼び出すキーワードを指定できます。初期値:"alert" |
icon | Iconコンポーネントに渡すアイコンを指定できます。 |
keycolor | キーカラーを指定します。 |
flow | コンテンツを囲むdiv要素に渡されます |
layout | レイアウトモジュールを切り替えます。初期値:"flex" |
Source Code
import type { ReactNode } from 'react';
import { Flow, Lism, Center, Icon } from 'lism-css/react';
import getAlertProps, { type AlertProps } from '../getProps';
export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
return (
<Lism layout={layout} {...alertProps}>
<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
<Icon icon={icon} />
</Center>
<Flow flow={flow}>{children}</Flow>
</Lism>
);
}Examples
layout を切り替える
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
<Alert layout='sideMain'> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p></Alert>type一覧
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
<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 icon='good' keycolor='pink'> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p></Alert>Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Alert を構築するコード例を紹介します。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
<SideMain className='u-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></SideMain>