ShapeDivider

svgで境界線を描画するコンポーネントです。

↓

Preview

リサイズ可能

Create Component

ShapeDivider(.c--shapeDivider)というコンポーネントを作って利用する例を紹介していきます。

Source Code

ソースコードを手動でコピー&ペーストしてご利用ください。

Import

 import jsx from '@/components/lism/ShapeDivider/index.jsx';

Props

プロパティ	説明
`viewBox`	出力するsvgのviewBox。
`level`	シェイプの高さレベルを正の数で指定できます。
`offsetY`	全体を上下にずらすための変数を出力します。
`offsetX`	シェイプを水平方向にずらすための変数を出力します。
`stretch`	シェイプを水平方向に引き伸ばして表示するための変数を出力します。
`scale`	`css.scale`に値を渡します。`-X`,`-Y`,`-XY`を指定するとユーティリティクラス化されます。
`isEmpty`	シェイプを表示せず、Spacerのように使用することができます。
`isEmpty`	シェイプを表示せず、Spacerのように使用することができます。

Usage

scaleで反転させることで、同じsvgを上下に利用できます。

↓

Example 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Container size='m' hasGutter py='50' bgc='text' c='base'>
  <Dummy />
</Container>
<Container size='m' hasGutter>
  <ShapeDivider viewBox='0 0 10 10' level='6' scale='-XY' offsetY='-0.5px'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
  <Box py='50'>
    <Dummy length='l' />
  </Box>
  <ShapeDivider viewBox='0 0 10 10' level='6' offsetY='0.5px'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
</Container>
<Container size='m' hasGutter py='50' bgc='text' c='base'>
  <Dummy />
</Container>

<Container size='m' hasGutter py='50' bgc='text' c='base'>
  <Dummy />
</Container>
<Container size='m' hasGutter>
  <ShapeDivider viewBox='0 0 10 10' level='6' scale='-XY' offsetY='-0.5px'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
  <Box py='50'>
    <Dummy length='l' />
  </Box>
  <ShapeDivider viewBox='0 0 10 10' level='6' offsetY='0.5px'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
</Container>
<Container size='m' hasGutter py='50' bgc='text' c='base'>
  <Dummy />
</Container>

SVGは、描画時にほんの少し隙間ができてしまうことがあるので、 offsetY で少しだけずらして配置しています。

以下はアニメーションをONにした時の例です。

↓

Example 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

<Container pos='r'>
  <ShapeDivider isEmpty level='7' />
  <Frame isLayer z='-1' maxW='100%'>
    <Media src='/img/img-3.jpg' alt='' width='960' height='640' />
    <Layer bgc='black:50%' />
  </Frame>
  <Container size='m' hasGutter py='50' c='white'>
    <Dummy length='xl' />
  </Container>
  <ShapeDivider viewBox='0 0 100 10' isAnimation c='base' level='7' offsetY='0.5px'>
    <path opacity='.3' d='M100,5.5C91.5,3,79.5,7.5,71.5,8C58,9,49,0.5,36,2c-9,1-13.5,3.5-20.5,3.5C8.5,6,0,2,0,2v8h100V5.5z'></path>
    <path opacity='.3' d='M100,1.5C87.8,6.6,79.3,2.1,67.8,2.6S53,6.5,42.5,5.5S23,0,15,0S1,3,0,4v6h100V1.5z'></path>
    <path d='M100,7.5C91.5,5,77.1,11.8,54,8C34.6,4.8,14.4,4.1,0,8.5V10h100V7.5z'></path>
  </ShapeDivider>
</Container>

上下に同じシェイプを使いまわす時、そのまま反転させると少し違和感がでてくるかもしれません。
そういう場合は、stretch,offsetXでsvgをずらすことで、同じシェイプでも自然な表示にすることができます。

↓

stretch,offsetXの活用

リサイズ可能

<Container size='m' hasGutter py='50'>
  <Dummy length='l' />
</Container>
<Container pos='r' hasGutter c='base' bgc='text'>
  <ShapeDivider viewBox='0 0 100 10' c='base' scale='-Y' level='8' stretch={1.1} offsetX='-5%' offsetY='-0.5px'>
    <path d='M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z'></path>
  </ShapeDivider>
  <Container size='m' py='50'>
    <Dummy length='xl' />
  </Container>
  <ShapeDivider viewBox='0 0 100 10' c='base' level='8' stretch={1.1} offsetY='0.5px'>
    <path d='M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z'></path>
  </ShapeDivider>
</Container>
<Container size='m' hasGutter py='50'>
  <Dummy length='l' />
</Container>