//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表示に変えていく。
簡単にアドレス記入部分を作成し、メインページの方のカード挿入に移る。
