Blockchain code Metaverse VR

Crypto×VR×SmartContract(497)

スポンサーリンク

//tips

//smart contract

昨日区分けができたapp barとdraw barをさらに改良していく。

http://localhost:3000/Createページに遷移してもきちんと表示のほうが行われている。

背景色のグレイ部分を修正。

これはmakestyleのpage箇所をLayout.jsの背景部分をコメントアウトすることで対応できた。

page: {
// background: '#f9f9f9',
width: '100%',
},

ちなみにpageは下記についていた。

{/* main content */}
<div className={classes.page}>
<div className={classes.toolbar}></div>
{ children }
</div>

Drawbar部分に画像やリストなどを挿入していく。

画像を組み込むためにcomponenntフォルダにimage.jsファイルを追加。これにより <MyImage />の引数に幅とソースを追加して、publicフォルダから画像を取り出せるようにしている。

export default function MyImage(props) {
let fname = './' + props.fname
let size = props.size + "px"

return (
// <img width={size} border="1"
<img width={size} border="0"
src={fname} />
)
}

<MyImage fname="image.jpg" size="250" />をlayoutコンポーネントに記入。

無事に表することができた。

さらにその下にlistも追加する。下記を追加してみて表示の方を確認できた。

<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>

ゆくゆくはこの部分をdebankの残高api表示に変えていく。

簡単にアドレス記入部分を作成し、メインページの方のカード挿入に移る。

人気の記事

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.