React.js?Gird?布局編寫鍵盤組件

更新時(shí)間：2022年09月13日 10:39:54 作者：鹿魚???????

這篇文章主要介紹了React.js?Gird?布局編寫鍵盤組件,Grid?布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局

前言;

Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。

display: grid指定一個(gè)容器采用網(wǎng)格布局。接著劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

使用px，也可以使用百分比。如果重復(fù)寫同樣的值非常麻煩，尤其網(wǎng)格很多時(shí)。這時(shí)，可以使用repeat()函數(shù)，簡(jiǎn)化重復(fù)的值。

justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右），align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）。

對(duì)于移動(dòng)端來(lái)說(shuō)，適配是頭等大事。畢竟市面上型號(hào)那么多。

vw 即（viewport width）可視窗口的寬度。vw 是一個(gè)尺寸單位，那它的寬度等于多少呢？等于1%整個(gè)屏幕的寬度。以 iphone6 手機(jī)為例，100vw = 750px => 1vw = 7.5px

在 vscode 中，我們可以安裝插件 px2vw ，就不需要花費(fèi)大量不必要的計(jì)算時(shí)間去把標(biāo)注圖中的 px 轉(zhuǎn)換為 vw。

<div className="keyboard-wrapper" >
  {
    keyboardArr.map((item) => {
      return (
        <div onClick={() => onClick(item)} key={item}>{item}</div>
      )
    })
  }
</div>

.keyboard-wrapper {
  position: fixed;
  width: 100%;
  height: 72vw;
  background-color: #242424;
  bottom: 0;
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
  color: #ffffff;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 2.6667vw;
  text-align: center;
  align-items: center;
  font-weight: 500;
  font-size: larger;
}

上方的輸入框，我們可以使用幾個(gè)屬性，將它變得漂亮一些。

取消外邊框:

outline-style: none ;

border 邊框優(yōu)化:

border: 0px;

設(shè)置光標(biāo)樣式:

caret-color: #576b21;

import React, { useState } from 'react';
import ReactDom from 'react-dom';

const keyboardArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0, '<']
const Test = function () {
  const [value, setValue] = useState('')
  const [show, setShow] = useState(false)

  const onChange = (e) => {
    setValue(e.target.value)
  }
  const onClick = (item) => {
    if (item === '<') {
      const _arr = value.split('')
      _arr.pop()
      setValue(_arr.join(''))
      return
    }
    setValue(value.concat(item))
  }
  const onFocus = () => {
    setShow(true)
  }
  return (
    <>
      <div className="input-box">
        USD
        <input value={value} onChange={onChange} onFocus={onFocus} />
      </div>
      {
        show && (
          <div className="keyboard-wrapper animate__animated animate__slideInUp" >
            {
              keyboardArr.map((item) => {
                return (
                  <div onClick={() => onClick(item)} key={item}>{item}</div>
                )
              })
            }
          </div>
        )
      }
    </>
  )
};
ReactDom.render(<Test />, document.getElementById('app'));

運(yùn)行結(jié)果：