React Bootstrap Card usage
react-bootstrapでのCardの使い方
Why, なぜ？
電気屋のコーポレートサイトを制作していて，
こういうのを複数並べるデザインが必要になった．
結果的に青枠，Google Map, 店舗名，電話番号，
のシンプルなカードが並べられた．もちろんスマフォでは
縦に揃う．
React-BootStrapを採用した．
react-bootstrap Reactに導入
これで導入
これがCardの使い方
App.cssを
* { text-align: center; }
にする
そしてApp.jsをdivだけにして
Terminalで
npm install react-bootstrap bootstrap
App.jsに
import Card from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
react-bootstrapだけでなく普通のbootstrapのcssも必要．
これをApp.jsでimportした上で
return (
<Card>
<Card.Header>Card Header</Card.Header>
<Card.Body>
<Card.Title>title </Card.Title>
<Card.Text>
Consectetur perspiciatis culpa praesentium perspiciatis
</Card.Text>
</Card.Body>
</Card>
)
をすると，画面いっぱいにカードが表示される
width, height, 中央揃え, centerize,
だがこのままだと幅が広すぎるので，widthを指定する
にすると288pxに制限される
cssを書かなくても，CardのclassNameに
className = 'text-center'
で文字を中央揃えにできる
1remは16px なので18remは288px
heightを設定すれば長いCardも作れる
style={{ width: '18rem', height: '27rem' }}
container
import {Container, Row, Col} from 'react-bootstrap';
でContainerに包むと
いい感じで真ん中による！
Container最強！！！
続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox - Speee DEVELOPER BLOG
こう言うことらしい．
headerとかは.contener-fluidの方がいいですね．
Repeat
これを使って複製して表示する
<Repeat times = {10}>
{(i) =>
<Card key={i}
style={{ width: '18rem', height: '12rem' }}
className = 'm-4 '
>
<Card.Header>Card Header</Card.Header>
<Card.Body>
<Card.Title>title </Card.Title>
<Card.Text>
Consectetur perspiciatis culpa
praesentium perspiciat
</Card.Text>
</Card.Body>
</Card>
}
</Repeat>
すごく便利 でもこれあるとCardGroup使っても横並びにできない
横タイトル
Cardにd-flex flex-rowをつけたらこうなった
これはこれで使えるかもしれない
<Repeat times = {10}>
{(i) =>
<CardGroup>
<Card key={i}
CardGroupごとRepeatしたらこうなった
Cardが横幅いっぱい？？？
RepeatなしでCardDeckにCard x 4書いたら並んだので
Repeat使うとDeckやGroupで並べられなくなることがわかった
縦並びのみ使えるlibraryだった．
Deck
function App() {
const data = [
{ header: 'header', title: 'title',
desc: 'Elit unde consectetur id mollitia?' },
{ header: 'header', title: 'title',
desc: 'Elit unde consectetur id mollitia?' },
{ header: 'header', title: 'title',
desc: 'Elit unde consectetur id mollitia?' },
{ header: 'header', title: 'title',
desc: 'Elit unde consectetur id mollitia?' },
];
const SkillCards = data.map((item, key) =>
<Card
style={{ width: '18rem', height: '12rem' }}
className = 'm-4'
key={key}
>
<Card.Header> {item.header}</Card.Header>
<Card.Body>
<Card.Title>{item.title}</Card.Title>
<Card.Text>
{item.desc}
</Card.Text>
</Card.Body>
)
return (
これでDeckに入れると隙間ができる
mx-2, my-0, ってところだろうか． mx-0, mx-4で上書きできる．
width
googlemapのiframeの width はbootstrap のw-50, w-100でもできた
ただしcardのwidthはh-50などは反映されない
そしてwidthを20rem以下にしないとcardが幅に合わせられない
実用
実際の電気屋のHPでは，このようにGridのなかのメインセクションにおいた．
<Card style = {{ width: '18rem' }}>
<Card.Body>
<Card.Title>
Card-title1
</Card.Title>
<Card.Text>
hogehoge
</Card.Text>
</Card.Body>
</Card>
</div>
これのTitleをshop name，Textをshop adress, としてmapした
return (
<div>
{ShopCards}
</div>
);
const ShopCards = shops.map((item, key) =>
<Card
style = {{ width: '18rem' }}
key={item.tel}
>
<Card.Body>
<Card.Title>
{item.name}店
</Card.Title>
<Card.Text>
{item.tel}
</Card.Text>
</Card.Body>
</Card>
);
これで配列からmapすると縦に並ぶ．
horizon, 横並びにする
横に並べるために
const ShopCards = shops.map((item, key) =>
<Row
key={item.tel}
>
<Col md = {4}>
<Card
</Card>
</Col>
</Row>
);
.........
を使ったが，GridのCol 6のなかに入れても意味がない
flex classを使って
[http://www.tohoho-web.com/bootstrap/flex.html:embed:cite]
d-flexだけで横に並ぶのか試した
<div
key={item.tel} className='d-flex flex-row'
>
これに入れても<Card />が横に並ばなかった． なので<CardGroup/>を使った [https://stackoverflow.com/questions/39031224/how-to-center-cards-in-bootstrap-4:embed:cite] className='px-4 py-4 align-item-center justify-content-center' そしてこれをぶち込んだら綺麗に並んだ 右側に何かを入れるのがわからん ### link href = './works' では飛ばない． [https://codesandbox.io/s/r1mr7r2q2p:embed:cite] どこを触っても跳べるように組むには 関数組む必要あるらしい？
<Card.Link
className = 'text-danger'
href={ 'tel:'+ item.tel}
{item.tel}
</Card.Link>
Card.Linkでいけた カード全体のクリックはできない． あとでやる ## img Card に工事用のfont awesomeを [https://www.npmjs.com/package/@fortawesome/react-fontawesome:embed:cite] foNtではなくてfoRt．
npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/react-fontawesome
3ついれないといけない
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
これでimportして探せる（未実装）
### Centerize, 中央揃え
Card自体は
<CardGroup
className='px-4 py-4 align-item-center justify-content-center'
{ShopCards}
で中央揃えにできる． しかし中身は左揃えになってしまう． 同じcss align-item-center justify-content-center を<Card /> に当てても中身は中央揃えにならない． text-centerを<CardGroup />に当てたら解決した！ ### Map どこにあるのか一発でわかるように地図を並べろと言われた Google Map自体は [https://www.360vr.co.jp/blog/shuukyaku/mybusiness/googlemap_umekomi:embed:cite] このように検索結果からembedを選択してcopyすればok e.g. 皇居 [f:id:kei_s_lifehack:20200531105420p:plain] このiframeを Card, Card.body, iframe src, Card.Title, Card.Link, とCardの中に挿入して並べる． Google Mapからだすとdefaultでついてるstyleは削る 大きさはwidth 250rem, height 150. ちなみにCardはwidth 20rem iframeのsrc linkが長すぎるのはなんとかしたい． 店ごとの配列に追加しよう． name, tel, adress, がすでにあるところに、 各店舗のgoogle mapからもってきたlinkをもってきて HOMEではitem.linkで出力する。 linkはgdocにまとめておく imgを中に入れるには
すればよかった Card.Imgは使ってないけど動いてしまった ### Designs [f:id:kei_s_lifehack:20200607141101p:plain] 中に画像が入っているデザイン になった [https://react-bootstrap.github.io/components/cards/#list-groups:embed:cite] list-groupも良さそうだ [f:id:kei_s_lifehack:20200607141315p:plain] ### issues Card自体のcenteriseはできてない MUIのFlatなのを使えてない 構成が非効率． map で
[ { title: hoge, img: link, descs = [ 'hoge', 'hoge', 'hoge', ], ]
から出力したい
},
rattle: {
special: '米10kg',
one: '米2kg',
two: '米1kg',
three: 'お楽しみ',
four: 'じゃがいも',
five: '玉ねぎ',
seven: 'ティッシュ1箱',
},
purchaseSouvenir: {
この構造だと，一つ一つ名前を呼び出す必要がある 他はdataの配列ファイルから読み込めるようにしたが， 画像だけは他のファイルから持ってこれない...
import shaomai from './img/siumai.jpg'
const summer2020 = [
{
title: 'ご来場記念品',
imgLink: {shaomai},
`
これでやっても，
../img/suimai.jpg` でやっても無理
絶対パスを使うのが必要で，そのためにはbundlerが必要らしい！！
画像は無理だが，これがListGroupItem
