Callout

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

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

記事の中で、重要なポイントを示すためのコンポーネントです。

↓

Preview

Calloutタイトル

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ

<Callout title="Calloutタイトル">
  <p>
    ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
  </p>
</Callout>

<div class="c--callout l--stack set--var:bxsh u--cbox -p:20 -g:10 -bd-x-s -bxsh:10" style="--keycolor:var(--blue);--bdc:var(--keycolor);--bdw: 3px">
  <div class="c--callout_head l--flex -c -fw:bold -ai:center -g:10" style="--c:var(--keycolor)">
    <div class="c--callout_icon l--center -fz:xl">
      <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="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"></path>
      </svg>
    </div>
    <span class="c--callout_title">Calloutタイトル</span>
  </div>
  <div class="c--callout_body l--flow -flow:s">
    <p>
      ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
    </p>
  </div>
</div>

How to use

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

Import

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

Props

プロパティ	説明
`keycolor`	表示カラーを指定します。
`icon`	アイコンを指定できます。
`type`	`keycolor`と`icon`の組み合わせのプリセット値を指定できます。初期値:`"note"`
`title`	タイトルテキストを指定します。
`flow`	`_body`に渡されます

ソースコード

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

Examples

type一覧

↓

typeの指定

Callout: type="note"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="alert"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="warning"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="point"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="check"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="help"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

<Callout title='Callout: type="note"' type="note">
  <DummyText length="codes" lang="ja"/>
</Callout>
<Callout title='Callout: type="alert"' type="alert">...</Callout>
<Callout title='Callout: type="warning"' type="warning">...</Callout>
<Callout title='Callout: type="point"' type="point">...</Callout>
<Callout title='Callout: type="check"' type="check">...</Callout>
<Callout title='Callout: type="help"' type="help">...</Callout>

`icon`、`keycolor`を指定

↓

icon、keycolorを指定

Heading text...

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

<Callout title="Heading text..." icon="cart" keycolor="pink">
  <DummyText lang="ja" />
</Callout>

※ アイコンは、title の指定がある時のみ表示されます。

Only lism-css

コンポーネントを作らずに、lism-css のコア要素だけで構築する例も紹介しておきます。

↓

Preview

Callout

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ

<Stack util="cbox" keycolor="blue" p="20" g="10" bdc="keycolor" bd-x-s bdw="3px" bxsh="10" bdrs="10">
  <Flex c="keycolor" fw="bold" ai="center" g="10">
    <Center className="c--note_icon" fz="xl">
      <Icon icon="note" />
    </Center>
    <span>Callout</span>
  </Flex>
  <Lism>
    <p>
      ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
    </p>
  </Lism>
</Stack>

<div class="l--stack u--cbox -p:20 -g:10 -bd-x-s -bxsh:10" style="--keycolor: var(--blue); --bdc: var(--keycolor); --bdw: 3px">
  <div class="l--flex -c -fw:bold -ai:center -g:10" style="--c: var(--keycolor)">
    <div class="c--note_icon l--center -fz:xl">
      <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="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"
        ></path>
      </svg>
    </div>
    <span>Callout</span>
  </div>
  <div>
    <p>
      ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
    </p>
  </div>
</div>