Blockchain code Metaverse VR

Crypto×VR×SmartContract(496)

スポンサーリンク

//tips

//smart contract

App barの組み込み作業に入る。

作成しながら作成画面と開発ツールでの表示領域を確認しているとMuiExample_Component-rootなど、表示がずれていることが確認できた。

ここでは下記が問題となっている。

root:{
display:'flex'
}

Flexの子要素に何が当たるのかが不明瞭のため一旦削除。

contents:{
// width:`calc(100% - ${drawerWidth}px)`,
textAlign: 'right',

を利用して右揃えにしようとしたがwidthを設定すると左にシフトする。

Appbarの場合は自動的にflexが働き、drawerとの左右の分割ができている。

.css-1c3zf87-MuiPaper-root-MuiAppBar-rootにflex機能が組み込まれており、これが機能しているよう。ただ、directionを確認すると上から下の方向でのflexなので左右分割に影響していない感じを受ける。

基本的な構造から見直す。drawerを入れた時の構造は下記。

return (
<div className={classes.root}>
{/* app bar */}

{/* side drawer */}
<Drawer
>
</Drawer>

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

</div>
)

この流れでdrawerを実験していくと <div className={classes.page}>ではなく本内容を記載することで予期せぬ、分割が生じていることがわかった。一方で、コンポーネント内に単一文章を記載してみると、右ブロックにあたるものとして認識されていることがわかった。

つまり、layoutコンポーネントとして使用することで機能するものであることがわかる。

Layoutありきでの構成は現在childrenの引き渡しができないので使えない。

再度lauoutコンポーネントの作成は行うが、今回はflexboxなどで代用できるのではないかと考え、そちらの方法で模索する。

下記のようにBoXにて作成していく中で分かったことは、<Drawerのparmanentで指定してしまうとboxの要素などではなく、別の概念で表示がされてしまうため、要素の中身として扱えない。

 

import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';

import { Button, Container, Typography } from "@mui/material"
import HailIcon from '@mui/icons-material/Hail'
import { makeStyles } from "@mui/styles"

import { TextField } from "@mui/material"
import { useState } from "react"

import { Drawer } from "@mui/material"

import { AppBar } from "@mui/material"
import { Toolbar } from "@mui/material"

const drawerWidth=240

const useStyles=makeStyles({
field:{
marginTop:20,
marginBottom:20,
display:'block',
},
page:{
background:'#f9f9f9',
width:'100%'

},
drawer:{
width:drawerWidth
},
drawerPaper:{
width:drawerWidth
},
root:{
display:'flex'
},

},{ name: "MuiExample_Component" })

function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
p: 1,
m: 1,
border: '1px solid',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...sx,
}}
{...other}
/>
);
}

// Item.propTypes = {
// sx: PropTypes.oneOfType([
// PropTypes.arrayOf(
// PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
// ),
// PropTypes.func,
// PropTypes.object,
// ]),
// };

export default function FlexGrow() {
const classes=useStyles()

const [title,setTitle]=useState('')
const [details,setDetails]=useState('')
const [titleError,setTitleError]=useState(false)
const [detailsError,setDetailsError]=useState(false)

const handleSubmit=(e)=>{
e.preventDefault()
setDetailsError(false)
setTitleError(false)

if(title==''){
setTitleError(true)
}

if(details==''){
setDetailsError(true)
}

if(title&&details){
console.log(title,details)
}
}

return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1, borderRadius: 1 }}
>
<Item >
<Drawer
className={classes.drawer}
variant="permanent"
anchor="left"
classes={{paper:classes.drawerPaper}}
>
<div>
<Typography varient="h5">
notes
</Typography>
</div>
</Drawer>
</Item>

<Item sx={{ flexGrow: 1 }}>
<Typography
//className={classes.title}
varient="h6"
color="textSecondary"
gutterBottom
>
Createpage
</Typography>

<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<TextField
onChange={(e)=>setTitle(e.target.value)}
className={classes.field}
label="Note Title"
variant="outlined"
color="secondary"
fullWidth
required
error={titleError}
/>

<TextField
onChange={(e)=>setDetails(e.target.value)}
className={classes.field}
label="Details"
variant="outlined"
color="secondary"
multiline
rows={4}
fullWidth
required
error={detailsError}

/>

<Button
//className={classes.btn}
type="submit"
varient="contained"
endIcon={<HailIcon />}
>
submit
</Button>

</form>

</Item>

</Box>
</div>
);
}

一旦layoutの挙動確認をする。

簡単にlayoutの挙動を確認するためだけのプロジェクトを作成。

import Navbar from "./Navbar";

const Layout = ({children}) => {
return (
<div className="content">
<Navbar />
{children}

</div>
);
}

export default Layout;

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
return (
<div>
<h1>Homepage</h1>
<p>aaaaaaaaaaaaaaa</p>

</div>
)
}

import Link from 'next/link';

const Navbar = () => {
return (
<nav>
<div className="logo">
<h1>Ninja List</h1>
</div>
<Link href="/"><a>Home</a></Link>
<Link href="/about"><a>About</a></Link>
<Link href="/ninjas/"><a>Ninja Listing</a></Link>
</nav>
);
}

export default Navbar;

きちんと動作することを確認。

また、下記の初期に導入されているcssの特性を確認し、かぶりに気を付ける。

Layout.jsを適用させた形に元のプロジェクトを修正。

Index.jsを開いてみたがlayout部分は反映されない。

Console.logを随所に入れてみたが、_app.jsは実行されるが、その中のreturnに組み込まれているlayoutコンポーネントは読み込まれていない。

import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

import Layout from '../components/layout';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
console.log("going");
console.log(props);

const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
console.log("app");

return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}

<CssBaseline />
<Layout>
<Component {...pageProps} />
</Layout>

</ThemeProvider>
</CacheProvider>
);
}
console.log("app2");

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};

一旦clearして再度npm run devしたらlayoutが反映された。

Indexにアクセスした際の仕込んだconsoleの流れを確認。

app2:_app.jsの最外部

ctx:_documentのMyDocument.getInitialProps = async (ctx)

app0:_app.jsのexport default function MyApp(props)

app:app.jsのreturn手前

layout:layoutコンポーネント

Document:document.jsのexport default class MyDocument extends Document

あとは上記内容を下記のように繰り返す。
ctx
app0
app
layout
document
ctx

やっとlayoutを効果的につかえてdrawbarとappbarを的確に配置できた。

 

人気の記事

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.