iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

從 React 開始,讓你的ui material 起來系列 第 9

[Day 9] 漂亮的輸入框 TextField 文本框

  • 分享至 

  • xImage
  •  

Day 8
從Day8 fork一份開始
昨天提到了登入 才發現 文本框沒有介紹到

可用於各項輸入

<Input
                    id="standard-adornment-password"
                    type={values.showPassword ? "text" : "password"}
                    value={values.password}
                    onChange={handleChange("password")}
                    endAdornment={
                      <InputAdornment position="end">
                        <IconButton
                          aria-label="toggle password visibility"
                          onClick={handleClickShowPassword}
                          onMouseDown={handleMouseDownPassword}
                        >
                          {values.showPassword ? (
                            <Visibility />
                          ) : (
                            <VisibilityOff />
                          )}
                        </IconButton>
                      </InputAdornment>
                    }
                  />

比較特別的是 可以用React狀態控制 去選擇顯示密碼與否

一般常用的樣式都可在元件中快速取用


上一篇
[Day 8] 常用的卡片 Card
下一篇
[Day 10] Checkbox 核取方塊
系列文
從 React 開始,讓你的ui material 起來15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言