Callout
記事の中で、重要なポイントを示すためのコンポーネントです。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
<Callout title='Calloutタイトル'> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</p></Callout>How to use
@lism-css/ui パッケージでCalloutとして提供しています。
Import
import { Callout } from '@lism-css/ui/react';Anatomy
<Callout type="" title="">...CONTENT...</Callout>Props
| プロパティ | 説明 |
|---|---|
keycolor | 表示カラーを指定します。 |
icon | アイコンを指定できます。 |
type | keycolorとiconの組み合わせのプリセット値を指定できます。初期値:"note" |
title | タイトルテキストを指定します。 |
flow | _bodyに渡されます |
Source Code
import type { ReactNode } from 'react';
import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
import getCalloutProps, { type CalloutProps } from '../getProps';
export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
return (
<Stack {...calloutProps}>
{title && (
<Flex className='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
<Center className='c--callout_icon' fz='xl'>
<Icon icon={icon} />
</Center>
<span className='c--callout_title'>{title}</span>
</Flex>
)}
<Flow className='c--callout_body' flow={flow}>
{children}
</Flow>
</Stack>
);
}Examples
type一覧
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
<Callout title='Callout: type="note"' type='note'> <Dummy 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="info"' type='info'>...</Callout><Callout title='Callout: type="help"' type='help'>...</Callout>Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Callout を構築するコード例を紹介します。
icon、keycolorを指定ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
<Callout title='Heading text...' icon='cart' keycolor='pink'> <Dummy lang='ja'/></Callout> ※ アイコンは、title の指定がある時のみ表示されます。
Only Core
コンポーネントを作らずにLismのコア要素だけで構築する例も紹介しておきます。
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
<Stack className='u-cbox' keycolor='blue' p='20' g='10' bdc='keycolor' bd-x-s bdw='4px' bxsh='10' bdrs='5'> <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>