Center
要素を上下左右中央揃えで配置するためのモジュールです。
主なProps
<Grid>で使えるpropsが使えます。
Import
import { Center } from '@lism-ui/core';Usage
水平方向に中央配置
Centerが高さを持たない場合は、コンテンツを水平方向に対して中央揃えで配置するだけとなります。
高さの設定が特にない時
TEXT
<Center p='30'> <Text fz='l'>TEXT</Text></Center>長いテキストの改行は左寄せになります。テキストの読みやすさを損ないません。
TEXT
ロレムイプサムの座り雨。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
<Center p='40' g='20'> <Text fz='l'>TEXT</Text> <p>...</p> <p>...</p></Center>上下左右中央に配置する
Centerに高さやアスペクト比が設定されている時、垂直方向に対しても中央揃えになります。
高さを設定した時
TEXT
<Center h='40vh' p='30' g='20'> <Text fz='l'>TEXT</Text></Center>アスペクト比を設定した時
TEXT
<Center ar='16/9' p='30' g='20'> <Text fz='l'>TEXT</Text></Center>垂直方向のみ中央揃えで配置する
水平方向の中央揃えを解除して、垂直方向のみ中央揃えにしたい場合は、<Center>に対してjustify-items:startを指定してください。
垂直方向のみ中央揃えに
TEXT
ロレムイプサムの座り雨。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
<Center ji='start' h='50vh' p='30' g='20'> <Text fz='l' fw='700'>TEXT</Text> <p>...</p> <p>...</p></Center>内部を スクロール可 にしたい時の注意点
”画面サイズに余裕がある時は上下中央揃えにしたいが、画面サイズが小さい時にコンテンツがはみ出すのでスクロールできるようにしておきたい。”
というケースでは、少し注意が必要です。
gridやflexで上下中央揃えを実装する方法では、スクロール時に上端が見えなくなるという問題があります。
Lismの<Center> は grid を使ってるので、この問題が発生します。
次のデモエリアをリサイズして挙動を確認してみてください。
スクロール時にコンテンツが全て見えない 😱
DEMO
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. 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.
<Center px='30' py='50' g='20' h='45vh' ovy='auto' bd> <Text fz='l' fw='700'>DEMO</Text> <Dummy length='l' /> <Dummy length='xl' /></Center>これを回避するには、次のアプローチが必要です。
<Center>の親要素に高さやアスペクト比、overflow-y:autoを指定する。<Center>にはmin-height:100%を指定する。
height:100% だとうまくいかないので注意してください。
スクロール時、正常にコンテンツが見える 😄
DEMO
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. 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.
<Box px='30' py='50' h='45vh' ovy='auto' bd> <Center minH='100%' g='20'> <Text fz='l' fw='700'>DEMO</Text> <Dummy length='l' /> <Dummy length='xl' /> </Center></Box>アスペクト指定で、コンテンツがはみ出すとスクロール可能にしたい時も同様です。
TEXT
ロレムイプサムの座り雨。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。つまり、彼らはあなたの悩みに一般的な魂を癒しています。困難な必要性に少ないもの、それがコンテンツの比較です。あなたが選択的な彼女の事実、無意味な含有、便利な阻止と甘さ、誰かがもっと腐敗した残り物。提供する時間の生活、それで発明者が賢明です。
<Frame ar='16/9' ovy='auto' bd p='30' g='20'> <Center minH='100%' g='20'> <Text fz='l'>TEXT</Text> <Dummy length='xs' lang='ja'/> <Dummy length='xl' lang='ja'/> </Center></Frame>TEXT
ロレムイプサムの座り雨。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。つまり、彼らはあなたの悩みに一般的な魂を癒しています。困難な必要性に少ないもの、それがコンテンツの比較です。あなたが選択的な彼女の事実、無意味な含有、便利な阻止と甘さ、誰かがもっと腐敗した残り物。提供する時間の生活、それで発明者が賢明です。
<Center ar='16/9' ovy='auto' bd p='30' g='20'> <Text fz='l'>TEXT</Text> <Dummy length='xs' lang='ja'/> <Dummy length='xl' lang='ja'/></Center>