Blockchain code Metaverse VR

SmartContract×VR×Crypto(576)

スポンサーリンク

//tips

//smart contract

画面に描画される際に一定の長さになると自動で折り返されるような設定を追加する。

調べていくと文字列に変換されていないものは折り返されないということがあるらしく、日本語で入力するときちんと画面幅に合わせて折り返された。

https://qiita.com/kazufoot21/items/b381f4b9c4f44fa97aee

https://stackoverflow.com/questions/62723863/css-overflow-wrap-does-not-work-in-react-js

何も指定しない場合は、日本語は、単語の途中で折り返され、英語は、単語ごとに折り返されるため長い英単語は、折り返されず、範囲を超えて表示されるよう。

style={{overflowWrap: 'break-word’}}を追加。

これにより文字の折り返しもしっかり対応できるようになった。

{item.userid==authid
?
<Typography className={classes.titlebackshape} style={{overflowWrap: 'break-word'}}>
{item.Message}
</Typography>
:

<Typography className={classes.titlebackshape2} align="right" style={{overflowWrap: 'break-word'}}>
{item.Message}
</Typography>
}

</div>
))

素晴らしい。

左右のコメントの枠の長さも多少調整する。width: '80%’とすることで表示領域を簡単に減らせた。

titlebackshape:{
backgroundColor: "#e1f5fe",
//border: '0.5px solid black',
borderRadius: '10px',
margin: '5px',
padding: '10px',
//display: 'inline-block'
width: '80%'
},

一方でログインユーザーのメッセージは左揃え、相手のユーザーは右揃えでメッセージを表示させるようにしたいので、こちらを追加編集。

<Box textAlign="center">の技を使うか。

doright:{
align:'right',
marginBottom:-6,
},

aright:{
//flexGrow:1//可能な限りの幅を取る
textAlign: "right",
},

は効果なし。

<Box className={classes.Rbalance}>

Rbalance:{
display:'flex',
justifyContent: 'flex-end'
},

こちらの設定により乗り越えることができた。メッセージの入れ物も右揃えにできた。

リストの文字・アバターも大きくして描画を調整する。

<span variant="h3" className={classes.imagemargin} >{item.username}</span>

Spanでfont調整することが難しかったので

<Typography variant="h3" className={classes.imagemargin}>{item.username}</Typography>

に組み替え。imgもこのタグ内に収めた。

<Typography variant="h3" className={classes.imagemargin}>{item.username} <img src={item.storagelink} className={classes.avatarshape} alt="" width="50" height="50"/></Typography>

こうすることで大文字の名前の横にアバターを表示させることができた。

アバター画像の位置をもう少し下げたいのでmakestyleを調整。

文字を浮かせたいのだがverticalAlign: 'middle’で対応できないどうするか。

{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist}  onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid).then(() => router.reload())}>
<img src={item.storagelink} className={classes.avatarshapeleft} alt="" width="50" height="50"/> <Typography display="inline" variant="h4" className={classes.imagemarginv}>{item.username} </Typography>

</Card>
</div>
))

人気の記事

1

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

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2022 All Rights Reserved Powered by AFFINGER5.