Blockchain code Metaverse VR

Crypto×VR×SmartContract(499)

スポンサーリンク

//tips

//smart contract

ページの半分を使用したカードの表示については、一つのGrid item内に複数表示することで解決。

{/* {notes.map(note => ( */}
{/* <Grid item xs={12} md={12} lg={12} key={note.id}> */}
<Grid item xs={12} md={12} lg={12}>
{notes.map(note => (
<NoteCard note={note} />
))}
</Grid>

カード間の隙間がないのでそちらも調整する。

<Grid itemにspacing={3}をつけるだけでは表示が変更されなかったので、別の方法を模索。

Failed prop type: The prop `spacing` of `Grid` can only be used together with the `container` prop.

akeStylesに下記を追加。

cardM:{
marginTop:20,
marginBottom:20,
},

一旦無理やりItemコンポーネントを作成し、カードをさらにカード形式のpaperで囲むことで幅をつくったが少し無理があるので別の方法を試す。

const Item = styled(Paper)(({ theme }) => ({
// // backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
// // ...theme.typography.body2,
// padding: theme.spacing(1),
// // textAlign: 'center',
// color: theme.palette.text.secondary,
// }));

こちらの方法を分解して、下記に適用。

cardM:{
"& > *": {
margin: theme.spacing(1)
}
},

なかなかカードの間に隙間を作れない。

https://mui.com/components/grid/#main-content

<Box>の中にGrid containerを格納するのが正しい方法なのだろうか。

<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>

一旦、上のカードとの被りを解消するために空行divを追加。

toolh:{
height:50,
flexGrow:1//可能な限りの幅を取る

<div className={classes.toolh}></div>

ここから着想を得て、divで囲んだら無事にcarの間に余白を作ることに成功。

<Grid item xs={6} md={6} lg={6} >

{/* <Grid item xs={12} md={12} lg={12} className={classes.cardM}> */}
{notes.map(note => (
<div className={classes.cardh}>
<NoteCard note={note} />
</div>

))}
</Grid>

ここに先に試したtwitterも連動させていく。問題は認証部分をどうするか。再度設計を確認する。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.