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

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

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.