WithSide
メディアクエリ・コンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並びと縦並びの切り替えを行うことができる2カラムレイアウトを作成します。
メインコンテンツとそのサイドコンテンツ、のようなレイアウトに活用できます。
div.l--withSide div div[data-is-side]Import
Section titled “Import”import { WithSide } from 'lism-css';| プロパティ | 出力 | 説明 |
|---|---|---|
sideW | --side-w | side要素の横幅 |
mainW | --main-w | main要素で維持したい最小幅 |
子要素に[data-is-side]が必要です。
[data-is-side]の横幅を--side-wで指定した値に固定しつつ、もう一方が--main-wで指定した横幅を下回るようになると、自動で1カラムに切り替わるようになっています。
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' mainW='16rem' g='30'> <Box> <Dummy /> </Box> <Box data-is-side>Side Content</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' mainW='16rem' g='30'> <Box> <Dummy /> </Box> <Box data-is-side>Side Content</Box></WithSide>Gridを使って似たレイアウトを構成する例
Section titled “Gridを使って似たレイアウトを構成する例”WithSide(.l--withSide)はブレイクポイントに依存しませんが、Gridで構成することで、レイアウトの切り替えポイントをブレイクポイントで指定して同じようなレイアウトを構築することもできます。
Gridを使ってWithSideのようなレイアウトを構築する例Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Side Content
<Grid gd={[`'.' 'side'`, `'. side' / 1fr 10rem`]} g='30'> <GridItem> <Dummy /> </GridItem> <GridItem ga='side'>Side Content</GridItem></Grid>sideを左側、ブレイクポイントを@mdにする例Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Side Content
<Grid gd={[`'.' 'side'`, null, `'side .' / 10rem 1fr`]} g='30'> <GridItem> <Dummy /> </GridItem> <GridItem ga='side'>Side Content</GridItem></Grid>