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
......@@ -15,9 +15,11 @@ 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 { Button } from '@nutui/nutui-react';
......@@ -36,6 +38,7 @@ const App = () => {
};
export default App;
```
:::
### Plain button
......@@ -43,6 +46,7 @@ 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 { Button } from '@nutui/nutui-react';
......@@ -50,19 +54,22 @@ 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 { Button } from '@nutui/nutui-react';
......@@ -70,14 +77,15 @@ 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,6 +93,7 @@ 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 { Button } from '@nutui/nutui-react';
......@@ -92,29 +101,31 @@ 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
<Button loading type="info" />
<Button loading type="warning">Loading...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
......@@ -126,16 +137,19 @@ const App = () => {
style={{ margin: 8 }}
>
Click me!
</Button>
</Button>
</>
);
};
export default App;
```
:::
### Icon button
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -159,12 +173,15 @@ const App = () => {
};
export default App;
```
:::
### Button size
Support 'large', 'normal', 'small' three sizes, the default is 'normal'.
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -172,21 +189,24 @@ import { Button } from '@nutui/nutui-react';
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 { Button } from '@nutui/nutui-react';
......@@ -194,18 +214,21 @@ import { Button } from '@nutui/nutui-react';
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 { Button } from '@nutui/nutui-react';
......@@ -213,17 +236,20 @@ import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button color="#7232dd">Monochrome</Button>
<Button color="#7232dd" plain>Monochrome</Button>
<Button color="linear-gradient(to right, #ff6034, #ee0a24)">
<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>
</Button>
</>
);
};
export default App;
```
:::
## API
### Props
......@@ -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,6 +18,7 @@ import { Button } from '@nutui/nutui-react';
按鈕支援 'default'、'primary'、'info'、'warning'、'danger'、'success' 六種類型，預設為 'default'。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -36,6 +37,7 @@ const App = () => {
};
export default App;
```
:::
### 樸素按鈕
......@@ -43,6 +45,7 @@ export default App;
通過 『plain』 屬性將按鈕設置為樸素按鈕，樸素按鈕的文字為按鈕顏色，背景為白色。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -57,12 +60,15 @@ const App = () => {
};
export default App;
```
:::
### 禁用狀態
通過 'disabled' 屬性來禁用按鈕，禁用狀態下按鈕不可點擊。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -78,6 +84,7 @@ const App = () => {
};
export default App;
```
:::
### 按鈕形狀
......@@ -85,6 +92,7 @@ export default App;
通過 『shape』 屬性設置按鈕形狀，支援圓形、方形按鈕，預設為圓形。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -99,22 +107,24 @@ const App = () => {
};
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
<Button loading type="info" />
<Button loading type="warning">載入中...</Button>
<Button
loading={loading}
type="success"
onClick={() => {
......@@ -126,16 +136,19 @@ const App = () => {
style={{ margin: 8 }}
>
Click me!
</Button>
</Button>
</>
);
};
export default App;
```
:::
### 圖示按鈕
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -159,12 +172,15 @@ const App = () => {
};
export default App;
```
:::
### 按鈕尺寸
支援 'large'、'normal'、'small' 三種尺寸，預設為 'normal'。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -180,6 +196,7 @@ const App = () => {
};
export default App;
```
:::
### 塊級元素
......@@ -187,6 +204,7 @@ export default App;
按鈕在預設情況下為行內塊級元素，通過 'block' 屬性可以將按鈕的元素類型設置為塊級元素，常用來實現通欄按鈕。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -194,18 +212,21 @@ import { Button } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Button block type="primary">塊級元素</Button>
<Button block type="primary">塊級元素</Button>
</>
);
};
export default App;
```
:::
### 自定義顏色
通過 color 屬性可以自定義按鈕的顏色。
:::demo
```tsx
import React from "react";
import { Button } from '@nutui/nutui-react';
......@@ -215,6 +236,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>
......@@ -223,7 +245,9 @@ const App = () => {
};
export default App;
```
:::
## API
### Props
......@@ -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.
先完成此消息的编辑！
想要评论请 注册 或