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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.