Alert

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

↓

Preview

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ

<Alert>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</Alert>

<div class="c--alert l--flex set--var:bxsh u--cbox -ai:center -p:15 -g:15 -bd -bdrs:10 -bxsh:10" style="--keycolor:var(--red)">
  <div class="l--center -c -fz:xl -fxsh:0" style="--c:var(--keycolor)">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      class="a--icon"
      aria-hidden="true"
    >
      <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"></path>
    </svg>
  </div>
  <div class="l--flow -flow:s">
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  </div>
</div>

How to use

@lism-css/ui パッケージでAlertとして提供しています。

Import

import { Alert } from '@lism-css/ui/react';

Props

プロパティ	説明
`type`	`keycolor`と`icon`の組み合わせを呼び出すキーワードを指定できます。初期値:`"alert"`
`icon`	`Icon`コンポーネントに渡すアイコンを指定できます。
`keycolor`	キーカラーを指定します。
`flow`	コンテンツを囲むdiv要素に渡されます
`layout`	レイアウトプリミティブを切り替えます。初期値:`"flex"`

ソースコード

ソースコードは GitHub で公開しています。

Examples

layout を切り替える

↓

Preview

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ

<Alert layout="withSide">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</Alert>

type一覧

↓

typeの指定

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきた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 を構築するコード例を紹介します。

↓

Preview

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ

<WithSide set="var:bxsh" util="cbox" keycolor="red" ai="center" p="15" g="15" bd bdrs="10" bxsh="10">
  <Center isSide c="keycolor" fz="xl">
    <Icon icon="alert" />
  </Center>
  <Flow flow="s">
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  </Flow>
</WithSide>

<div class="l--withSide set--var:bxsh u--cbox -ai:center -p:15 -g:15 -bd -bdrs:10 -bxsh:10" style="--keycolor: var(--red)">
  <div class="l--center is--side -c -fz:xl" style="--c: var(--keycolor)">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="a--icon"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      aria-hidden="true"
    >
      <path
        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"
      ></path>
    </svg>
  </div>
  <div class="l--flow -flow:s">
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  </div>
</div>