Divider
境界線
<Divider>/<ShapeDivider>コンポーネントわける？- Lismクラス:
.e--divider/.e--shapeDivider
Props
shape: 形状の指定。svgで描画されます。line(→slope?)wavearrowcircleが指定できます。- 任意のsvgの受け渡しができるようにしたい未実装
shapeの指定がなければ、background-color? で線を描画する(?) 要検討shape用 propisFlip: シェイプの上下反転をするかどうか。false: 下から上へ伸びるシェイプになります。(デフォルト)true: 上から下へ伸びるシェイプになります。(デフォルト)
level: 高さのレベル。正の数・負の数を指定できます。5がデフォルト。level * 1cqwで<Divider>の高さが計算され、600px時点の値(level * 6px)が最小値、1200px時点の値(level * 12px)が最大値となります。levelが マイナスの時、図形の描画方向が反転します。
stretch: 横方向の伸縮率。1がデフォルトです。offset: X方向の位置をずらす。stretchと合わせて%単位で指定してください。- 例:
stretch:1.5なら、offset:-25%~25%の範囲が有効です。
- 例:
memo
- 任意のSVGを指定できるようにしたい
- アニメーション機能、SVGにあわせて、アニメーション手法を切り替える?
- 左右交互移動 (これが一番カンタン)
- 一方向への無限ループ（隙間がどうしても見えてしまうので一旦なし）
(参考: https://chocolat5.com/ja/tips/loop-image-animation/ (opens in a new tab))
Import
import { Divider } from '@loos/lism-core';DEMO
<Divider shape="line1" c="black"/>
<Divider shape="line2" c="black"/>
<Divider shape="line3" c="black"/><Divider shape="line1" isAnimation c="black"/>
<Divider shape="line2" isAnimation c="black"/>
<Divider shape="line3" isAnimation c="black"/>More
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box alignfull bgc="#e5e5e5" c="black">
<Divider shape="line1" c="white" isFlip/>
<Box isFlow py={40} px={40}>...</Box>
<Divider shape="line1" c="white" />
</Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box alignfull bgc="#e5e5e5" c="black">
<Divider shape="line1" c="white" level={-2.5} isFlip/>
<Box isFlow py={40} px={40}>
<DammyText />
<DammyText length="l" />
</Box>
<Divider shape="line1" c="white" level={-2.5}/>
</Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box alignfull bgc="#e5e5e5" c="black">
<Divider shape="line2" c="white" isFlip/>
<Box isFlow py={40} px={40}>...</Box>
<Divider shape="line2" c="white" />
</Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box alignfull bgc="#e5e5e5" c="black">
<Divider shape="line3" c="white" isFlip/>
<Box isFlow py={40} px={40}>...</Box>
<Divider shape="line3" c="white" />
</Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box alignfull bgc="#e5e5e5" c="black">
<Divider shape="line3" isAnimation c="white" isFlip/>
<Box isFlow py={40} px={40}>...</Box>
<Divider shape="line3" isAnimation c="white" />
</Box>