Blockchain code Metaverse VR

Crypto×VR×SmartContract(498)

スポンサーリンク

//tips

//smart contract

メイン部分上部はlayoutコンポーネントに組み込んだ。

<div>
<Typography variant="h5" >
Address: 0xa242fcb2acbb118ea1b6829efe8b7e2087b00000
</Typography>
<Typography variant="h6" >
Following:200 Follower:200 gifted:2000
</Typography>
<MailIcon />
</div>

Address:の右側などは色を変化させてコピーできるようにしたいので、文中に変数を埋め込み、その変数のみに対応するスタイルをどう形成するかも以後確認する。

まずはcomponentフォルダに新たにカード用のjsを作成。そちらをindexなどのページに読み込ませる形にする。

カードの中身をjsonに作成し、それをindexで一旦noteとして読み取ったのちにcardとして作成。

import * as React from 'react';

import { Card, IconButton, Typography } from '@mui/material';
import { CardHeader } from '@mui/material';
import { CardContent } from '@mui/material';
import DeleteOutlined from '@mui/icons-material/DeleteOutlined'

const NoteCard = ({note}) => {

return (
<div>
<Card elevation={3}>
<CardHeader
action={
<IconButton onClick={()=>console.log('delete')}>
<DeleteOutlined />

</IconButton>

}
title={note.title}
subheader={note.category}

/>
<CardContent>
<Typography variant='body2'color='textSecondary'>

{note.details}
</Typography>

</CardContent>
</Card>
</div>
);
}

export default NoteCard;

Index箇所では下記のようにし、json-server --watch data/db.json --port 8000に上げたdata.jsonを取得している。

const [notes,setNotes]=useState([])//([])

useEffect(() => {
fetch('http://localhost:8000/notes')
.then(res => res.json())
.then(data => setNotes(data))
}, [])

ただ、試しに使った表示のgridがうまく機能していない感じ。

<Grid spacing={3} >
{notes.map(note =>(
<Grid item key={note.id}>
<NoteCard note={note}/>
</Grid>
))}
</Grid>

Gridの代わりを使うか検討。やはりGridを文の途中に挟むことはできないのか。

<Grid container>
<Grid item></Grid>
<Grid item></Grid>
<Grid item></Grid>
</Grid>

素直にGrid containerを使った方が後々ページを分割するのに使えそう。

<Grid container spacing={3}>

<Grid item xs={12} md={12} lg={12}>
<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
</Typography>
</Grid>

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

Maksestyleでflex要素を組み込み下記のようにしたら、興味深いことになった。

<Grid item xs={12} md={12} lg={12} className={classes.balancer}>

<Grid item xs={6} md={6} lg={6} >
<Typography variant="h4" component="h1" gutterBottom>
Next.js exampleeeeeeeeeeeeeeeeeeeeeeee
</Typography>
</Grid>

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

</Grid>

カードの各要素が縦に積み重なるのではなく横にぎっしり詰まっているのでそこをなんとかする。xs={12} md={12} lg={12} を6にしても同じ結果になるので、gridの認識対象の問題。

人気の記事

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.