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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

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