style(input): 增加css 变量,优化demo和文档 (#1730)

jdf2e · Dec 2, 2023 · 3bcd7e9 · 3bcd7e9
1 parent d44f437
commit 3bcd7e9
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 42 deletions.
diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
-import { Ask, Close, Eye } from '@nutui/icons-react-taro'
+import { Tips, Close, Eye, Marshalling } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import { Input, Button } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
@@ -152,15 +152,9 @@ const InputDemo = () => {
             }
           >
             {inputType === 'text' ? (
-              <Eye size={14} />
+              <Eye color="var(--nutui-gray-7)" />
             ) : (
-              <img
-                width="16px"
-                height="16px"
-                style={{ display: 'block' }}
-                src="https://storage.360buyimg.com/imgtools/ac2c6b6b23-a6a8f1d0-ea4b-11ed-8ae6-f73921e8465b.png"
-                alt=""
-              />
+              <Marshalling color="var(--nutui-gray-7)" />
             )}
           </div>
         </div>
@@ -188,8 +182,11 @@ const InputDemo = () => {
             padding: '0 10px',
           }}
         >
-          <Ask />
-          <Input placeholder={translated.codeplaceholder} />
+          <Tips color="var(--nutui-gray-7)" />
+          <Input
+            placeholder={translated.codeplaceholder}
+            style={{ '--nutui-input-padding': '10px' }}
+          />
           <div
             className="right"
             style={{ display: 'flex', alignItems: 'center' }}

diff --git a/src/packages/input/demo.tsx b/src/packages/input/demo.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Ask, Close, Eye } from '@nutui/icons-react'
+import { Tips, Close, Eye, Marshalling } from '@nutui/icons-react'
 import { Input } from './input'
 import Form from '@/packages/form'
 import { useTranslate } from '../../sites/assets/locale'
@@ -157,15 +157,9 @@ const InputDemo = () => {
             }
           >
             {inputType === 'text' ? (
-              <Eye />
+              <Eye color="var(--nutui-gray-7)" />
             ) : (
-              <img
-                width="16px"
-                height="16px"
-                style={{ display: 'block' }}
-                src="https://storage.360buyimg.com/imgtools/ac2c6b6b23-a6a8f1d0-ea4b-11ed-8ae6-f73921e8465b.png"
-                alt=""
-              />
+              <Marshalling color="var(--nutui-gray-7)" />
             )}
           </div>
         </div>
@@ -193,8 +187,11 @@ const InputDemo = () => {
             padding: '0 10px',
           }}
         >
-          <Ask />
-          <Input placeholder={translated.codeplaceholder} />
+          <Tips color="var(--nutui-gray-7)" />
+          <Input
+            placeholder={translated.codeplaceholder}
+            style={{ '--nutui-input-padding': '10px' }}
+          />
           <div className="right">
             <Button type="primary" size="small">
               {translated.sendCode}

diff --git a/src/packages/input/doc.en-US.md b/src/packages/input/doc.en-US.md
@@ -200,7 +200,7 @@ export default App;
 ```tsx
 import  React, { useState } from "react";
 import { Input, Button } from '@nutui/nutui-react';
-import { Ask } from '@nutui/icons-react'
+import { Tips } from '@nutui/icons-react'
 
 const App = () => {
   return (
@@ -213,7 +213,7 @@ const App = () => {
            padding: '0 10px',
          }}
        >
-         <Ask />
+         <Tips />
          <Input placeholder="Please enter the SMS verification code" />
          <div className="right">
            <Button type="primary" size="small">
@@ -275,16 +275,19 @@ export default App;
 | onClear | Triggered when the clear button is clicked | `(value: string) => void` | `-` |
 | onClick | Triggered when the input container is clicked | `(value: MouseEvent<HTMLDivElement>) => void` | `-` |
 
-## 主题定制
+## Theming
 
-### 样式变量
+### CSS Variables
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| 名称 | 说明 | 默认值 |
+| Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-input-border-bottom | 边框颜色 | `#eaf0fb` |
-| \--nutui-input-border-bottom-width | 边框宽度 | `0px` |
-| \--nutui-input-disabled-color | 禁用的文本颜色 | `#c8c9cc` |
-| \--nutui-input-font-size | 文本字号 | `$font-size-base` |
-| \--nutui-input-padding | 输入框容器的内边距 | `10px 25px` |
+| \--nutui-input-border-bottom | border color | `#eaf0fb` |
+| \--nutui-input-border-bottom-width | border width | `0px` |
+| \--nutui-input-color | color | `$color-title` |
+| \--nutui-input-disabled-color | disable color | `#c8c9cc` |
+| \--nutui-input-background-color | background color | `$color-background-overlay` |
+| \--nutui-input-border-radius | border radius | `0` |
+| \--nutui-input-font-size | font size  | `$font-size-base` |
+| \--nutui-input-padding | input padding | `10px 25px` |
diff --git a/src/packages/input/doc.md b/src/packages/input/doc.md
@@ -200,7 +200,7 @@ export default App;
 ```tsx
 import  React, { useState } from "react";
 import { Input, Button } from '@nutui/nutui-react';
-import { Ask } from '@nutui/icons-react'
+import { Tips } from '@nutui/icons-react'
 
 const App = () => {
   return (
@@ -213,7 +213,7 @@ const App = () => {
            padding: '0 10px',
          }}
        >
-         <Ask />
+         <Tips />
          <Input placeholder="请输入短信验证码" />
          <div className="right">
            <Button type="primary" size="small">
@@ -288,6 +288,9 @@ export default App;
 | --- | --- | --- |
 | \--nutui-input-border-bottom | 边框颜色 | `#eaf0fb` |
 | \--nutui-input-border-bottom-width | 边框宽度 | `0px` |
+| \--nutui-input-color | 文本颜色 | `$color-title` |
 | \--nutui-input-disabled-color | 禁用的文本颜色 | `#c8c9cc` |
+| \--nutui-input-background-color | 输入框背景颜色 | `$color-background-overlay` |
+| \--nutui-input-border-radius | 输入框圆角 | `0` |
 | \--nutui-input-font-size | 文本字号 | `$font-size-base` |
 | \--nutui-input-padding | 输入框容器的内边距 | `10px 25px` |
diff --git a/src/packages/input/doc.taro.md b/src/packages/input/doc.taro.md
@@ -200,7 +200,7 @@ export default App;
 ```tsx
 import  React, { useState } from "react";
 import { Input, Button } from '@nutui/nutui-react-taro';
-import { Ask } from '@nutui/icons-react-taro'
+import { Tips } from '@nutui/icons-react-taro'
 
 const App = () => {
   return (
@@ -213,7 +213,7 @@ const App = () => {
            padding: '0 10px',
          }}
        >
-         <Ask />
+         <Tips />
          <Input placeholder="请输入短信验证码" />
          <div
            className="right"
@@ -291,6 +291,9 @@ export default App;
 | --- | --- | --- |
 | \--nutui-input-border-bottom | 边框颜色 | `#eaf0fb` |
 | \--nutui-input-border-bottom-width | 边框宽度 | `0px` |
+| \--nutui-input-color | 文本颜色 | `$color-title` |
 | \--nutui-input-disabled-color | 禁用的文本颜色 | `#c8c9cc` |
+| \--nutui-input-background-color | 输入框背景颜色 | `$color-background-overlay` |
+| \--nutui-input-border-radius | 输入框圆角 | `0` |
 | \--nutui-input-font-size | 文本字号 | `$font-size-base` |
 | \--nutui-input-padding | 输入框容器的内边距 | `10px 25px` |
diff --git a/src/packages/input/doc.zh-TW.md b/src/packages/input/doc.zh-TW.md
@@ -200,7 +200,7 @@ export default App;
 ```tsx
 import  React, { useState } from "react";
 import { Input, Button } from '@nutui/nutui-react';
-import { Ask } from '@nutui/icons-react'
+import { Tips } from '@nutui/icons-react'
 
 const App = () => {
   return (
@@ -213,7 +213,7 @@ const App = () => {
            padding: '0 10px',
          }}
        >
-         <Ask />
+         <Tips />
          <Input placeholder={translated.codeplaceholder} />
          <div className="right">
            <Button type="primary" size="small">
@@ -285,6 +285,9 @@ export default App;
 | --- | --- | --- |
 | \--nutui-input-border-bottom | 边框颜色 | `#eaf0fb` |
 | \--nutui-input-border-bottom-width | 边框宽度 | `0px` |
+| \--nutui-input-color | 文本颜色 | `$color-title` |
 | \--nutui-input-disabled-color | 禁用的文本颜色 | `#c8c9cc` |
+| \--nutui-input-background-color | 输入框背景颜色 | `$color-background-overlay` |
+| \--nutui-input-border-radius | 输入框圆角 | `0` |
 | \--nutui-input-font-size | 文本字号 | `$font-size-base` |
 | \--nutui-input-padding | 输入框容器的内边距 | `10px 25px` |
diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss
@@ -6,9 +6,10 @@
   width: 100%;
   padding: $input-padding;
   line-height: 24px;
-  background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;
+  border-radius: $input-border-radius;
+  background-color: $input-background-color;
   border-bottom: $input-border-bottom-width solid $input-border-bottom;
 
   .nut-icon {
@@ -17,14 +18,15 @@
 
   .nut-input-native {
     width: 100%;
-    color: $gray1;
+    color: $input-color;
     flex: 1;
     background-color: transparent;
     padding: 0;
     border: 0;
     outline: 0 none;
     font: inherit;
     text-decoration: none;
+    background-color: transparent;
   }
 
   &-disabled {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -592,10 +592,12 @@ $input-border-bottom-width: var(
 ) !default;
 $input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-base) !default;
+$input-border-radius: var(--nutui-input-border-radius, 0) !default;
+$input-color: var(--nutui-input-color, $gray1) !default;
+$input-background-color: var(--nutui-input-background-color, $white) !default;
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
 // textarea（✅）
-
 $textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $text-color) !default;