Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 940f5fd3 编写于 作者: O oasis-cloud 提交者： GitHub
浏览文件
操作

fix: 修复 button 组件的样式通过最外层标签设置 (#840)

上级 5c5793d0
隐藏空白更改
内联 并排
Showing with 185 addition and 120 deletion
src/packages/button/button.scss
浏览文件 @ 940f5fd3
......@@ -108,6 +108,7 @@
display: flex;
align-items: center;
justify-content: center;
background: initial;
}
&--loading,
......
src/packages/button/button.taro.tsx
浏览文件 @ 940f5fd3
......@@ -153,7 +153,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
{...rest}
onClick={(e) => handleClick(e)}
>
<div className="nut-button__warp" style={getStyle()}>
<div className="nut-button__warp">
{loading && (
<Icon
classPrefix={iconClassPrefix}
......
src/packages/button/demo.taro.tsx
浏览文件 @ 940f5fd3
......@@ -243,6 +243,9 @@ const ButtonDemo = () => {
<Button color="#7232dd" plain style={{ margin: 8 }}>
{translated['1076d771']}
</Button>
<Button color="rgba(10,101,208,0.75)" style={{ margin: 8 }}>
{translated['1076d771']}
</Button>
<Button
color="linear-gradient(to right, #ff6034, #ee0a24)"
style={{ margin: 8 }}
......
src/packages/button/demo.tsx
浏览文件 @ 940f5fd3
......@@ -232,6 +232,9 @@ const ButtonDemo = () => {
<Button color="#7232dd" plain style={{ margin: 8 }}>
{translated['1076d771']}
</Button>
<Button color="rgba(10,101,208,0.75)" style={{ margin: 8 }}>
{translated['1076d771']}
</Button>
<Button
color="linear-gradient(to right, #ff6034, #ee0a24)"
style={{ margin: 8 }}
......
src/packages/button/doc.en-US.md
浏览文件 @ 940f5fd3
# Button
# Button
### Introduce
......@@ -15,27 +15,30 @@ import { Button } from '@nutui/nutui-react';
### The button type
The button supports six types: 'default', 'primary', 'info', 'warning', 'danger', 'success', which defaults to 'default'.
The button supports six types: 'default', 'primary', 'info', 'warning', 'danger', 'success', which defaults to '
default'.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button type="primary">primary</Button>
<Button type="info">info</Button>
<Button type="default">default</Button>
<Button type="danger">danger</Button>
<Button type="warning">warning</Button>
<Button type="success">success</Button>
<Button type="primary">primary</Button>
<Button type="info">info</Button>
<Button type="default">default</Button>
<Button type="danger">danger</Button>
<Button type="warning">warning</Button>
<Button type="success">success</Button>
</>
);
};
export default App;
```
:::
### Plain button
......@@ -43,41 +46,46 @@ export default App;
Set the button to naïve with the text of the naïve button and the background white with the 'plain' attribute.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button plain type="primary">primary</Button>
<Button plain type="info">info</Button>
<Button plain type="primary">primary</Button>
<Button plain type="info">info</Button>
</>
);
};
export default App;
```
:::
### Disabled state
Disable the button through the 'disabled' attribute, which is not clickable.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button disabled type="primary">primary</Button>
<Button plain disabled type="info">info</Button>
<Button plain disabled type="primary">primary</Button>
<Button disabled type="primary">primary</Button>
<Button plain disabled type="info">info</Button>
<Button plain disabled type="primary">primary</Button>
</>
);
};
export default App;
```
:::
### Button shape
......@@ -85,145 +93,163 @@ export default App;
Set the button shape through the 'shape' property, support circular, square buttons, and default to circle.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button shape="square" type="primary">square</Button>
<Button type="info">circular</Button>
<Button shape="square" type="primary">square</Button>
<Button type="info">circular</Button>
</>
);
};
export default App;
```
:::
### Load state
:::demo
```tsx
import React ,{useState} from "react";
import React, { useState } from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const [loading,setLoading] = useState(false)
const [loading, setLoading] = useState(false)
return (
<>
<Button loading type="info" />
<Button loading type="warning">Loading...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
setTimeout(() => {
setLoading(false)
}, 1500);
<Button loading type="info" />
<Button loading type="warning">Loading...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
setTimeout(() => {
setLoading(false)
}, 1500);
setLoading(!loading)
}}
style={{ margin: 8 }}
>
Click me!
</Button>
}}
style={{ margin: 8 }}
>
Click me!
</Button>
</>
);
};
export default App;
```
:::
### Icon button
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button shape="square" plain type="primary" icon="star-fill" />
<Button shape="square" type="primary" icon="star">collection</Button>
<Button
shape="round"
type="primary"
size="large"
icon="star"
iconSize={20}
>
collection
</Button>
</>
<Button shape="square" plain type="primary" icon="star-fill" />
<Button shape="square" type="primary" icon="star">collection</Button>
<Button
shape="round"
type="primary"
size="large"
icon="star"
iconSize={20}
>
collection
</Button>
</>
);
};
export default App;
```
:::
### Button size
Support 'large', 'normal', 'small' three sizes, the default is 'normal'.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button size="large" type="primary">Large</Button>
<Button type="primary">Normal</Button>
<Button size="small" type="primary">Small</Button>
<Button size="large" type="primary">Large</Button>
<Button type="primary">Normal</Button>
<Button size="small" type="primary">Small</Button>
</>
);
};
export default App;
```
:::
### Block
Buttons are inline block-level elements by default, and the 'block' attribute allows you to set the element type of the button to a block-level element, which is commonly used to implement banner buttons.
Buttons are inline block-level elements by default, and the 'block' attribute allows you to set the element type of the
button to a block-level element, which is commonly used to implement banner buttons.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button block type="primary">Block</Button>
<Button block type="primary">Block</Button>
</>
);
};
export default App;
```
:::
### Custom colors
The color property allows you to customize the color of the button.
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button color="#7232dd">Monochrome</Button>
<Button color="#7232dd" plain>Monochrome</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
Gradient
</Button>
<Button color="#7232dd">Monochrome</Button>
<Button color="#7232dd" plain>Monochrome</Button>
<Button color="rgba(10,101,208,0.75)">Monochrome</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
Gradient
</Button>
</>
);
};
export default App;
```
:::
## API
### Props
......@@ -234,8 +260,8 @@ export default App;
| size | Dimensions, optionally `large` `small` | string | `normal` |
| shape | Shape, optionally `square` | string | `round` |
| color | Button color, which supports incoming linear-gradient gradients | string | - |
| plain | Whether it is a naïve button or not | boolean | `false` |
| disabled | Whether to disable the button | boolean | `false` |
| plain | Whether it is a naïve button or not | boolean | `false` |
| disabled | Whether to disable the button | boolean | `false` |
| block | Whether it is a block-level element | boolean | `false` |
| icon | Button icon, with the Icon component name property | string | - |
| iconSize`v1.4.7` | Button icon size, with the Icon's size property | string \| number | `16` |
......@@ -248,13 +274,17 @@ export default App;
| onClick`v1.3.8` | Triggered when the button is clicked | `event: MouseEvent` |
### Support Native MiniProgram API
Not supported native MiniProgram API before 1.3.11 version, if you are a user who needs to use the native MiniProgram button component capability，please upgrade to version 1.3.11 as soon as possible. For detailed API of native MiniProgram button components, please go to[more documents](https://taro-docs.jd.com/docs/components/forms/button)
Not supported native MiniProgram API before 1.3.11 version, if you are a user who needs to use the native MiniProgram
button component capability，please upgrade to version 1.3.11 as soon as possible. For detailed API of native MiniProgram
button components, please go to[more documents](https://taro-docs.jd.com/docs/components/forms/button)
## Theming
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/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 | Default Value |
| --- | --- |
......
src/packages/button/doc.md
浏览文件 @ 940f5fd3
......@@ -215,6 +215,7 @@ const App = () => {
<>
<Button color="#7232dd">单色按钮</Button>
<Button color="#7232dd" plain>单色按钮</Button>
<Button color="rgba(10,101,208,0.75)">单色按钮</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</Button>
......
src/packages/button/doc.taro.md
浏览文件 @ 940f5fd3
......@@ -232,6 +232,7 @@ const App = () => {
<>
<Button color="#7232dd">单色按钮</Button>
<Button color="#7232dd" plain>单色按钮</Button>
<Button color="rgba(10,101,208,0.75)">单色按钮</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</Button>
......
src/packages/button/doc.zh-TW.md
浏览文件 @ 940f5fd3
......@@ -18,24 +18,26 @@ import { Button } from '@nutui/nutui-react';
按鈕支援 'default'、'primary'、'info'、'warning'、'danger'、'success' 六種類型，預設為 'default'。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button type="primary">主要按鈕</Button>
<Button type="info">資訊按鈕</Button>
<Button type="default">默認按鈕</Button>
<Button type="danger">危險按鈕</Button>
<Button type="warning">警告按鈕</Button>
<Button type="success">成功按鈕</Button>
<Button type="primary">主要按鈕</Button>
<Button type="info">資訊按鈕</Button>
<Button type="default">默認按鈕</Button>
<Button type="danger">危險按鈕</Button>
<Button type="warning">警告按鈕</Button>
<Button type="success">成功按鈕</Button>
</>
);
};
export default App;
```
:::
### 樸素按鈕
......@@ -43,8 +45,9 @@ export default App;
通過 『plain』 屬性將按鈕設置為樸素按鈕，樸素按鈕的文字為按鈕顏色，背景為白色。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
......@@ -57,14 +60,17 @@ const App = () => {
};
export default App;
```
:::
### 禁用狀態
通過 'disabled' 屬性來禁用按鈕，禁用狀態下按鈕不可點擊。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
......@@ -78,6 +84,7 @@ const App = () => {
};
export default App;
```
:::
### 按鈕形狀
......@@ -85,67 +92,73 @@ export default App;
通過 『shape』 屬性設置按鈕形狀，支援圓形、方形按鈕，預設為圓形。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button shape="square" type="primary">方形按鈕</Button>
<Button type="info">圓形按鈕</Button>
<Button shape="square" type="primary">方形按鈕</Button>
<Button type="info">圓形按鈕</Button>
</>
);
};
export default App;
```
:::
### 載入狀態
:::demo
```tsx
import React ,{useState} from "react";
import React, { useState } from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const [loading,setLoading] = useState(false)
const [loading, setLoading] = useState(false)
return (
<>
<Button loading type="info" />
<Button loading type="warning">載入中...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
setTimeout(() => {
setLoading(false)
}, 1500);
setLoading(!loading)
}}
style={{ margin: 8 }}
>
Click me!
</Button>
<Button loading type="info" />
<Button loading type="warning">載入中...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
setTimeout(() => {
setLoading(false)
}, 1500);
setLoading(!loading)
}}
style={{ margin: 8 }}
>
Click me!
</Button>
</>
);
};
export default App;
```
:::
### 圖示按鈕
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button shape="square" plain type="primary" icon="star-fill" />
<Button shape="square" type="primary" icon="star">收藏</Button>
<Button
<Button shape="square" plain type="primary" icon="star-fill" />
<Button shape="square" type="primary" icon="star">收藏</Button>
<Button
shape="round"
type="primary"
size="large"
......@@ -159,27 +172,31 @@ const App = () => {
};
export default App;
```
:::
### 按鈕尺寸
支援 'large'、'normal'、'small' 三種尺寸，預設為 'normal'。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button size="large" type="primary">大號按鈕</Button>
<Button type="primary">普通按鈕</Button>
<Button size="small" type="primary">小型按鈕</Button>
<Button size="large" type="primary">大號按鈕</Button>
<Button type="primary">普通按鈕</Button>
<Button size="small" type="primary">小型按鈕</Button>
</>
);
};
export default App;
```
:::
### 塊級元素
......@@ -187,43 +204,50 @@ export default App;
按鈕在預設情況下為行內塊級元素，通過 'block' 屬性可以將按鈕的元素類型設置為塊級元素，常用來實現通欄按鈕。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button block type="primary">塊級元素</Button>
<Button block type="primary">塊級元素</Button>
</>
);
};
export default App;
```
:::
### 自定義顏色
通過 color 屬性可以自定義按鈕的顏色。
:::demo
```tsx
import React from "react";
import React from "react";
import { Button } from '@nutui/nutui-react';
const App = () => {
const App = () => {
return (
<>
<Button color="#7232dd">單色按鈕</Button>
<Button color="#7232dd" plain>單色按鈕</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
漸變色按鈕
</Button>
<Button color="#7232dd">單色按鈕</Button>
<Button color="#7232dd" plain>單色按鈕</Button>
<Button color="rgba(10,101,208,0.75)">單色按鈕</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
漸變色按鈕
</Button>
</>
);
};
export default App;
```
:::
## API
### Props
......@@ -234,8 +258,8 @@ export default App;
| size | 尺寸，可選值為 `large` `small` | string | `normal` |
| shape | 形狀，可選值為 `square` | string | `round` |
| color | 按鈕顏色，支持傳入linear-gradient漸變色 | string | - |
| plain | 是否為樸素按鈕 | boolean | `false` |
| disabled | 是否禁用按鈕 | boolean | `false` |
| plain | 是否為樸素按鈕 | boolean | `false` |
| disabled | 是否禁用按鈕 | boolean | `false` |
| block | 是否為塊級元素 | boolean | `false` |
| icon | 按鈕圖示，同Icon元件name屬性 | string | - |
| iconSize`v1.4.7` | 按鈕圖示大小，同 Icon 的size属性 | string \| number | `16` |
......@@ -248,7 +272,9 @@ export default App;
| onClick`v1.3.8` | 点击按钮时触发 | `event: MouseEvent` |
### 支持小程序API能力
目前1.3.11版本以前不支持原生小程序API, 如果你是需要使用原生小程序button组件能力的用户，请尽快升级至1.3.11版本，关于原生小程序button组件的详细API请前往[查阅更多文档](https://taro-docs.jd.com/docs/components/forms/button)
目前1.3.11版本以前不支持原生小程序API,
如果你是需要使用原生小程序button组件能力的用户，请尽快升级至1.3.11版本，关于原生小程序button组件的详细API请前往[查阅更多文档](https://taro-docs.jd.com/docs/components/forms/button)
## 主題定制
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或