工事点検のアプリケーションを利用される方は比較的高齢の方が多く、SmartBeeもより使いやすいUIというものを目指しています。
今回はそんなSmartBeeのデザイン周りに関する検証メモとなります。
■ Material UI の sx prop の利用方法
# sx propとは
sx prop とは, Material-uiのcomponentに対してスタイルを指定できるものです。
プレーンなhtmlでのインラインCSSのような感覚で使用できます。
# 利用方法
sx propsに対応しているcomponentに対して、sx要素で指定します。
```react:例
＜Box sx={{ bgcolor:"#777" }}＞
Hello
＜/Box＞
```
# 利用可能プロパティ
sxで利用できるプロパティの一例を記載します。
## border
指定コンポーネントの周りに囲い線をつけます。
```react:例
＜Box sx={{ border: 1 }} ＞
Hello
＜/Box＞
```
## display
表示/非表示を設定します。
```react:例
＜Box sx={{ display: 'none' }} ＞
Hello
＜/Box＞
```
## size
縦幅および横幅を設定します。
### 横幅
```react:例
＜Box sx={{ width: 200 }} ＞
Hello
＜/Box＞
```
### 縦幅
```react:例
＜Box sx={{ height: '250' }} ＞
Hello
＜/Box＞
```
指定には0-1の小数値が使え、その場合は自動的に%扱いとなります。
また、%表記も可能です。
```react:例
＜Box sx={{ width: 0.5 }} ＞
Hello
＜/Box＞
＜Box sx={{ width: '50%' }} ＞
Hello
＜/Box＞
SmartBee
作業項目や現場情報の一括管理を可能にするクラウドサービスです。
SmartBeeを導入すれば、管理業務の負担が減るばかりでなく、点検現場の状況をリアルタイムで把握でき、ミスやコスト削減につながります。
