コンテンツにスキップ
Lism CSS

Note

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

↓
Preview
Note Title

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能

Only Core

Section titled “Only Core”

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

↓
Preview
Note

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。

リサイズ可能 
<Stack className='u--cbox' keycolor='gray' p='30' g='20' bd='is' bdw='4px' bdrs='5'>
  <Flex fw='bold' ai='c' g='20'>
    <Center className='c--note_icon' fz='l' c='keycolor' skipState>
      <Icon icon='note' scale='1.1' />
    </Center>
    <span>Note</span>
  </Flex>
  <Lism>
    <Dummy lang='ja' />
  </Lism>
</Stack>

Create Component

Section titled “Create Component”

ここからはCallout(.c--callout)というコンポーネントを作って利用する例を紹介していきます。

Source Code

Section titled “Source Code”
ソースコードを手動でコピー&ペーストしてご利用ください。

Import

Section titled “Import”
 import jsx from '@/components/lism/Note/index.jsx';

Props

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

Usage

Section titled “Usage”
↓
typeの指定
Note: type="note"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="alert"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="warning"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="point"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="check"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="info"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Note: type="help"

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。 

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

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

↓
icon、keycolorを指定
Heading text...

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。 

<Note title='Heading text...' icon='cart' keycolor='blue'>
  <Dummy lang='ja'/>
</Note>