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

WithSide

サイドコンテンツを持つ2カラムレイアウト を作成します。

Props

プロパティ出力説明
isSide.is--sideサイド要素として扱いたい要素に指定します。
sideW--side-wSide要素の横幅
mainMinW--main-minWもう一方の流動幅の要素が維持する最小幅
(sidePositionがない時のみ有効)
sidePosition[data-side-position]サイド要素の配置を指定できます。
bp.-gt@{bp}sidePositionの指定がある時の、カラム折り返しタイミングを指定できます
(sidePositionがない時は無効)

Import

import { WithSide } from '@lism-ui/core';

Usage

子要素の一方に isSide(.is--side)を指定する必要があります。

ブレイクポイントでの折り返し

sidePosition([data-side-position])を指定し、横並び時と縦並び時のside要素の配置を指定できます。 この時、<WithSide>(.l--withSide)は grid レイアウトで構成されるようになり、ブレイクポイントを起点に縦並び・横並びが切り替わります。
(デフォルトではsmサイズでレイアウトが切り替わります)

sidePositionは、"{横並び時の配置} {縦並び時の配置}" という形式で指定します。
それぞれstartまたはendで指定します。

↓
sidePosition='start end'

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

Side Content
リサイズ可能 
<WithSide sidePosition='start end' sideW='10rem' g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>

sidePosition指定パターン一覧

sidePosition([data-side-position])は以下の値をサポートしています。

  • 'start start' ( = 'start')
  • 'start end'
  • 'end start'
  • 'end end' ( = 'end')
↓sidePosition="start start"

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

Side Content
↓sidePosition="start end"

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

Side Content
リサイズ可能
↓sidePosition="end start"

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

Side Content
↓sidePosition="end end"

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

Side Content
リサイズ可能

ブレイクポイントの指定

bpで指定できます。

ここで有効な値は、grid(gd)がサポートするブレイクポイントに従います。（sass設定で上書き可能）

↓
bp='md'にセット

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

Side Content
リサイズ可能 
<WithSide sidePosition='end' bp='md' sideW='10rem' g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>

メディアクエリに依存しない配置切り替え

sidePosition([data-side-position]) の指定を省くことで、メディアクエリに依存せずに横並びと縦並びの切り替えを行うこともできます。

この時、side要素ではない方の要素の幅が、--main-minWの値を下回ると1カラムに切り替わるようになっています。

↓

デフォルトではmax(16rem,50%)の幅を最低限維持します

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

Side Content
リサイズ可能 
<WithSide sideW='10rem' g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>
↓

メイン要素が30remを下回る時、1カラムに切り替える

Side Content

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

リサイズ可能 
<WithSide sideW='10rem' mainMinW='30rem' g='30'>
  <Box isSide>Side Content</Box>
  <Box>
    <Dummy />
  </Box>
</WithSide>

反転

-fxd:rrクラス（flex-direction:row-reverse）を併用することで、横並びの時の順番だけを反転させることができます。

これにより、横並びの時は左側、縦並びの時は下側にside要素を配置できます。

↓
例

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

Side Content
リサイズ可能 
<WithSide fxd='rr' sideW='10rem' g='30'>
  <Box>
    <Dummy />
  </Box>
  <Box isSide>Side Content</Box>
</WithSide>