Note
<div class="c--note">
<div class="c--note__head l--flex">
<span class="c--note__heading">Note title</span>
</div>
<div class="c--note__body">
<p>...</p>
</div>
</div>- Lismクラス:
.b--Note
主なprops
- heading
isFlow:__bodyに渡されます
Memo: NoteHeader, NoteBody にわける？ → preset で色とアイコンの一括指定ができなくなる（ContextやChildren処理が必要）
Import
import { Note } from '@loos/lism-core';DEMO
デフォルト
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。
<Note>
<p>Lorem ipsum text...</p>
</Note>headingを指定
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。
<Note heading="Heading text...">
<p>Lorem ipsum text...</p>
</Note>isFlowを指定
Lorem ipsum text...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Note heading="Heading text..." isFlow='s'>
<p>Lorem ipsum text...</p>
<p>Lorem ipsum text...</p>
</Note>iconを指定 (iconを使う場合、headingが必須)
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。
<Note heading="Heading text..." icon="note">
...
</Note>keycolorを指定
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかしリンク文字列と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組みの利点を提案したのなら。
<Note heading="Heading text..." icon="note" keycolor="blue">
...
</Note>Presets
Alertと同じプリセットが使用可能。