From bce16719214387224d5bff4924fedaad585a30d7 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 3 Aug 2022 11:17:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20checkbox=20props=20=E6=89=A9=E5=B1=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/checkbox/checkbox.scss | 24 ++- src/packages/checkbox/checkbox.tsx | 60 +++++- src/packages/checkbox/demo.scss | 14 ++ src/packages/checkbox/demo.tsx | 135 +++++++++++--- src/packages/checkbox/doc.en-US.md | 158 +++++++++++++++- src/packages/checkbox/doc.md | 183 +++++++++++++++++-- src/packages/checkboxgroup/checkboxgroup.tsx | 26 ++- src/packages/icon/icon.tsx | 9 +- src/styles/variables.scss | 8 +- 9 files changed, 556 insertions(+), 61 deletions(-) create mode 100644 src/packages/checkbox/demo.scss diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 29135ae..7a2a466 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -5,16 +5,34 @@ &--reverse { flex-direction: row-reverse; .nut-checkbox__label { - margin-right: 15px; + margin-right: $checkbox-label-margin-left; margin-left: 0; } } &__label { - margin-left: 15px; - font-size: 16px; + margin-left: $checkbox-label-margin-left; + font-size: $checkbox-label-font-size; color: $checkbox-label-color; &--disabled { color: $checkbox-label-disable-color; } } + &__icon { + color: $primary-color; + font-size: $checkbox-icon-font-size; + transition-duration: 0.3s; + transition-property: color, border-color, background-color; + } + &__icon--unchecked { + color: $checkbox-icon-disable-color; + font-size: $checkbox-icon-font-size; + } + &__icon--indeterminate { + color: $primary-color; + font-size: $checkbox-icon-font-size; + } + &__icon--disable { + color: $help-color; + font-size: $checkbox-icon-font-size; + } } diff --git a/src/packages/checkbox/checkbox.tsx b/src/packages/checkbox/checkbox.tsx index ffb9384..41bdeb6 100644 --- a/src/packages/checkbox/checkbox.tsx +++ b/src/packages/checkbox/checkbox.tsx @@ -11,6 +11,10 @@ export interface CheckBoxProps { iconSize: string | number iconName: string iconActiveName: string + iconIndeterminateName: string + iconClassPrefix: string + iconFontClassName: string + indeterminate: boolean label: string onChange: (state: boolean, label: string) => void } @@ -22,6 +26,9 @@ const defaultProps = { iconSize: 18, iconName: 'check-normal', iconActiveName: 'checked', + iconClassPrefix: 'nut-icon', + iconFontClassName: 'nutui-iconfont', + iconIndeterminateName: 'check-disabled', onChange: (state, label) => {}, } as CheckBoxProps export const Checkbox: FunctionComponent< @@ -40,41 +47,78 @@ export const Checkbox: FunctionComponent< checked, disabled, onChange, + indeterminate, + iconClassPrefix, + iconFontClassName, + iconIndeterminateName, + getParentVals, + max, ...rest - } = props + } = props as any const [innerChecked, setInnerChecked] = useState(checked) const [innerDisabled, setDisabled] = useState(disabled) + const [_indeterminate, setIndeterminate] = useState(indeterminate) useEffect(() => { setInnerChecked(checked) setDisabled(disabled) }, [disabled, checked]) + useEffect(() => { + setIndeterminate(indeterminate) + }, [indeterminate]) + + const getIconName = () => { + if (!innerChecked) { + return iconName + } + if (_indeterminate) { + return iconIndeterminateName + } + return iconActiveName + } + const renderIcon = () => { return ( ) } const color = () => { - return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5' + if (innerDisabled) { + return 'nut-checkbox__icon--disable' + } + if (innerChecked) { + if (_indeterminate) { + return 'nut-checkbox__icon--indeterminate' + } + return 'nut-checkbox__icon' + } + return 'nut-checkbox__icon--unchecked' + + // return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5' } const renderLabel = () => { return ( - {label || children} + {children || label} ) } const handleClick = () => { - if (disabled) return - onChange && onChange(!innerChecked, label || (children as string)) - return setInnerChecked(!innerChecked) + if (!disabled) { + const latest = !innerChecked + if (max !== undefined && latest && getParentVals().length >= max) return + onChange && onChange(latest, label || (children as string)) + setInnerChecked(latest) + } } return ( diff --git a/src/packages/checkbox/demo.scss b/src/packages/checkbox/demo.scss new file mode 100644 index 0000000..4ab014e --- /dev/null +++ b/src/packages/checkbox/demo.scss @@ -0,0 +1,14 @@ +.demo-check { + margin-right: 10px; +} +.nut-checkboxgroup { + display: flex; + flex-wrap: wrap; +} +.nut-checkbox { + display: flex; + margin-right: 20px; + .nut-checkbox__label { + margin-left: 10px; + } +} diff --git a/src/packages/checkbox/demo.tsx b/src/packages/checkbox/demo.tsx index f492ec7..ff900f6 100644 --- a/src/packages/checkbox/demo.tsx +++ b/src/packages/checkbox/demo.tsx @@ -1,5 +1,6 @@ import React, { useRef, useState } from 'react' import { useTranslate } from '../../sites/assets/locale' +import './demo.scss' import Toast from '../toast' import { Cell } from '../cell/cell' import { Checkbox } from './checkbox' @@ -11,6 +12,7 @@ interface T { '48b50759': string '7db1a8b2': string f3480b64: string + f3480b646: string f4e46058: string '8a2e2847': string '70ffa5d8': string @@ -18,6 +20,7 @@ interface T { '9bbfbbc7': string '45c21a9e': string '2cd0f3be': string + '2cd0f3be1': string b2dd27e8: string '4584d5bf': string '7df5c456': string @@ -33,6 +36,7 @@ const CheckboxDemo = () => { '48b50759': '复选框', '7db1a8b2': '禁用状态', f3480b64: '未选时禁用状态', + f3480b646: '半选状态', f4e46058: '选中时禁用状态', '8a2e2847': '自定义尺寸', '70ffa5d8': '自定义图标', @@ -46,12 +50,14 @@ const CheckboxDemo = () => { '77fc8365': '全选和取消', '3a5040b6': '全选', f4d4bae5: '取消全选', + '2cd0f3be1': '反选', }, 'zh-TW': { '74fc5d8a': '基本用法', '48b50759': '複選框', '7db1a8b2': '禁用狀態', f3480b64: '未選時禁用狀態', + f3480b646: '半选状态', f4e46058: '選中時禁用狀態', '8a2e2847': '自定義尺寸', '70ffa5d8': '自定義圖示', @@ -65,13 +71,15 @@ const CheckboxDemo = () => { '77fc8365': '全選和取消', '3a5040b6': '全選', f4d4bae5: '取消全選', + '2cd0f3be1': '反選', }, 'en-US': { '74fc5d8a': 'Basic Usage', '48b50759': 'Checkbox', '7db1a8b2': 'Disabled State', - f3480b64: 'Disabled state when not selected', - f4e46058: 'Disabled state when selected', + f3480b64: 'Disabled state', + f3480b646: 'Semi selective', + f4e46058: 'Disabled state', '8a2e2847': 'Custom size', '70ffa5d8': 'Custom Icon', '87941cd4': 'Click Trigger Event', @@ -83,25 +91,24 @@ const CheckboxDemo = () => { '7df5c456': 'Disabled', '77fc8365': 'All Select and Cancel', '3a5040b6': 'Select All', + '2cd0f3be1': 'reverse', f4d4bae5: 'Cancel All Selection', }, }) const [checked, setChecked] = useState(true) + const [checkbox1, setCheckbox1] = useState(false) + const [indeterminate, setIndeterminate] = useState(false) const [checkboxgroup1, setCheckboxgroup1] = useState(['1']) const [checkboxgroup2] = useState(['1']) + const [checkboxgroup3] = useState(['1']) + const [checkboxgroup4] = useState([]) const checkboxgroup2Ref = useRef(null) + const checkboxgroup3Ref = useRef(null) return ( <>
-

{ - console.log('click') - setChecked(false) - }} - > - {translated['74fc5d8a']} -

+

{translated['74fc5d8a']}

{ checked={false} /> +

{translated.f3480b646}

+ + + +

{translated['7db1a8b2']}

{ {translated['48b50759']} -

CheckboxGroup

+

checkboxGroup

{

{translated['7df5c456']}

- - {translated['4584d5bf']} - - - {translated['4584d5bf']} - - - {translated['4584d5bf']} - - - {translated['4584d5bf']} - + {translated['4584d5bf']} + {translated['4584d5bf']} + {translated['4584d5bf']} + {translated['4584d5bf']}

{translated['77fc8365']}

@@ -220,7 +228,7 @@ const CheckboxDemo = () => { onChange={(value) => { Toast.text( `${ - value.length === 2 + value.length === 4 ? translated['3a5040b6'] : translated.f4d4bae5 }` @@ -233,6 +241,12 @@ const CheckboxDemo = () => { {translated['4584d5bf']} + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + @@ -241,6 +255,7 @@ const CheckboxDemo = () => { onClick={() => { ;(checkboxgroup2Ref.current as any).toggleAll(true) }} + style={{ margin: '0 20px 0 0' }} > {translated['3a5040b6']} @@ -249,9 +264,81 @@ const CheckboxDemo = () => { onClick={() => { ;(checkboxgroup2Ref.current as any).toggleAll(false) }} + style={{ margin: '0 20px 0 0' }} > {translated['2cd0f3be']} + + +

checkboxGroup使用，限制最大可选数（2个）

+ + { + Toast.text(value) + }} + > + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + + + +

全选/半选/取消

+ + { + ;(checkboxgroup3Ref.current as any).toggleAll(state) + }} + > + {translated['3a5040b6']} + + { + if (value.length === 4) { + setIndeterminate(false) + setCheckbox1(true) + } else if (value.length && value.length < 4) { + setIndeterminate(true) + setCheckbox1(true) + } else { + setCheckbox1(false) + } + }} + > + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + + + {translated['4584d5bf']} + +
diff --git a/src/packages/checkbox/doc.en-US.md b/src/packages/checkbox/doc.en-US.md index 838ea5f..88560ba 100644 --- a/src/packages/checkbox/doc.en-US.md +++ b/src/packages/checkbox/doc.en-US.md @@ -169,6 +169,38 @@ export default CheckBoxDemo; ::: +## CheckBoxGroup Disabled + +:::demo + +```tsx +import React, { useState } from "react"; +import { Checkbox, CheckboxGroup } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup1, setCheckboxgroup1] = useState(['1']) + return ( + + + apple + + + plum + + + hawthorn + + + pomegranate + + + ) +} +export default CheckBoxDemo; +``` + +::: + ## CheckboxGroup Select All/Cancel :::demo @@ -186,7 +218,7 @@ const CheckBoxDemo = () => { ref={checkboxgroup2Ref} checkedValue={checkboxgroup2} onChange={(value) => { - Toast.text(`${value.length === 2 ? 'Select All' : 'Cancel'}`) + Toast.text(`${value.length === 4 ? 'Select All' : 'Cancel'}`) }} > @@ -195,9 +227,16 @@ const CheckBoxDemo = () => { pomegranate + + hawthorn + + + pomegranate + + ) } export default CheckBoxDemo; @@ -219,6 +267,99 @@ export default CheckBoxDemo; ::: +## use checkboxGroup, Limit the maximum number of options (2) + +:::demo +```tsx +import React, { useState, useRef } from "react"; +import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup2, setCheckboxgroup2] = useState(['1']) + const checkboxgroup2Ref = useRef(null) + return (<> + { + Toast.text(value) + }} + > + + Combined check box + + + Combined check box + + + Combined check box + + + Combined check box + + + ) +} +export default CheckBoxDemo; +``` +::: + +## Select all / half / cancel +:::demo +```tsx +import React, { useState, useRef } from "react"; +import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup2, setCheckboxgroup2] = useState(['1']) + const checkboxgroup2Ref = useRef(null) + const [checkbox1, setCheckbox1] = useState(false) + const [indeterminate, setIndeterminate] = useState(false) + return (<> + { + ;(checkboxgroup2Ref.current as any).toggleAll(state) + }} + > + selectAll + + { + if (value.length === 4) { + setIndeterminate(false) + setCheckbox1(true) + } else if (value.length && value.length < 4) { + setIndeterminate(true) + setCheckbox1(true) + } else { + setCheckbox1(false) + } + }} + > + + Combined check box + + + Combined check box + + + Combined check box + + + Combined check box + + + ) +} +export default CheckBoxDemo; +``` +::: + + ## Checkbox | Props | Description | Type | Default | @@ -229,6 +370,9 @@ export default CheckBoxDemo; | iconSize | [Icon size](#/icon) | String、Number | `18` | | iconName | [Icon name](#/icon)，Before selecting (it is recommended to modify it with 'iconActiveName') | String | `'check-normal'` | | iconActiveName | [Icon name](#/icon)，Once selected (it is recommended to modify it together with 'iconName') | String | `'checked'` | +| iconIndeterminateName | [Icon Name](#/en-US/icon)，Semi selected state | String | `'check-disabled'`| +| iconClassPrefix | Custom icon class name prefix, used to use custom icons | String | `nut-icon` | +| iconFontClassName | Basic class name of custom icon font | String | `nutui-iconfont` | | label | The text content of the check box | String | - | ## CheckboxGroup @@ -237,15 +381,23 @@ export default CheckBoxDemo; |----- | ----- | ----- | ----- | | checkedValue | The identifier of the currently selected item, corresponding to 'label' | String | -| | disabled | Whether to disable the selection will be used for all check boxes under it | Boolean | `false`| +| max | Limit the maximum number of options | `undefined|number` | `undefined`| ## Checkbox Event | Props | Description | Callback parameters| |----- | ----- | ----- | -| change | Triggers | when the value changes (state, label), 'state' represents the current state, and 'label' represents the currently selected value| +| onChange | Triggers | when the value changes (state, label), 'state' represents the current state, and 'label' represents the currently selected value| ## CheckboxGroup Event | Props | Description | Callback parameters| |----- | ----- | ----- | -| change | Triggered when the value changes | label, 'label' returns an array representing the collection of the currently selected items| \ No newline at end of file +| onChange | Triggered when the value changes | label, 'label' returns an array representing the collection of the currently selected items| + +## CheckboxGroup API + +| 方法名 | 说明 | 参数 | +|----- | ----- | ----- | +| toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection | +| toggleReverse | Reverse selection | - | \ No newline at end of file diff --git a/src/packages/checkbox/doc.md b/src/packages/checkbox/doc.md index 25bb288..5c7b2ff 100644 --- a/src/packages/checkbox/doc.md +++ b/src/packages/checkbox/doc.md @@ -127,7 +127,7 @@ export default CheckBoxDemo; ::: -## CheckBoxGroup使用 +## CheckBoxGroup 使用 :::demo @@ -165,6 +165,38 @@ export default CheckBoxDemo; ::: +## CheckBoxGroup 禁用 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Checkbox, CheckboxGroup } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup1, setCheckboxgroup1] = useState(['1']) + return ( + + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + + ) +} +export default CheckBoxDemo; +``` + +::: + ## CheckboxGroup 全选/取消 :::demo @@ -182,7 +214,7 @@ const CheckBoxDemo = () => { ref={checkboxgroup2Ref} checkedValue={checkboxgroup2} onChange={(value) => { - Toast.text(`${value.length === 2 ? '全选' : '取消全选'}`) + Toast.text(`${value.length === 4 ? '全选' : '取消全选'}`) }} > @@ -191,9 +223,16 @@ const CheckBoxDemo = () => { 组合复选框 + + 组合复选框 + + + 组合复选框 + + + ) +} +export default CheckBoxDemo; +``` + +::: + +## checkboxGroup使用，限制最大可选数（2个） + +:::demo +```tsx +import React, { useState, useRef } from "react"; +import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup2, setCheckboxgroup2] = useState(['1']) + const checkboxgroup2Ref = useRef(null) + return (<> + { + Toast.text(value) + }} + > + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + ) } export default CheckBoxDemo; ``` +::: +## 全选/半选/取消 +:::demo +```tsx +import React, { useState, useRef } from "react"; +import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react'; + +const CheckBoxDemo = () => { + const [checkboxgroup2, setCheckboxgroup2] = useState(['1']) + const checkboxgroup2Ref = useRef(null) + const [checkbox1, setCheckbox1] = useState(false) + const [indeterminate, setIndeterminate] = useState(false) + return (<> + { + ;(checkboxgroup2Ref.current as any).toggleAll(state) + }} + > + 全选 + + { + if (value.length === 4) { + setIndeterminate(false) + setCheckbox1(true) + } else if (value.length && value.length < 4) { + setIndeterminate(true) + setCheckbox1(true) + } else { + setCheckbox1(false) + } + }} + > + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + + 组合复选框 + + + ) +} +export default CheckBoxDemo; +``` ::: ## Checkbox -| 字段 | 说明 | 类型 | 默认值 | -|----- | ----- | ----- | -----| -| checked | 是否处于选中状态 | Boolean | `false`| -| disabled | 是否禁用选择 | Boolean | `false`| -| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`| -| iconSize | [图标尺寸](#/icon) | String、Number | `18`| -| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`| -| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`| -| label | 复选框的文本内容 | String | -| +| 字段 | 说明 | 类型 | 默认值 | +|-----------------------| ----- | ----- | -----| +| checked | 是否处于选中状态 | Boolean | `false`| +| disabled | 是否禁用选择 | Boolean | `false`| +| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`| +| iconSize | [图标尺寸](#/icon) | String、Number | `18`| +| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`| +| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`| +| iconIndeterminateName | [图标名称](#/icon)，半选状态 | String | `'check-disabled'`| +| iconClassPrefix | 自定义 icon 类名前缀，用于使用自定义图标 | String | `nut-icon` | +| iconFontClassName | 自定义 icon 字体基础类名 | String | `nutui-iconfont` | +| label | 复选框的文本内容 | String | -| ## CheckboxGroup -| 字段 | 说明 | 类型 | 默认值| -|----- | ----- | ----- | ----- | -| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -| -| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`| +| 字段 | 说明 | 类型 | 默认值| +|--------------| ----- |-------------| -- | +| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -| +| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`| +| max | 限制最大可选数 | `undefined|number` | `undefined`| ## Checkbox Event @@ -244,4 +388,11 @@ export default CheckBoxDemo; | 字段 | 说明 | 回调参数| |----- | ----- | ----- | -| onChange | 值变化时触发 | label,`label`返回一个数组，表示当前选中项的集合| \ No newline at end of file +| onChange | 值变化时触发 | label,`label`返回一个数组，表示当前选中项的集合| + +## CheckboxGroup API + +| 方法名 | 说明 | 参数 | +|----- | ----- | ----- | +| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选 | +| toggleReverse | 反选 | - | \ No newline at end of file diff --git a/src/packages/checkboxgroup/checkboxgroup.tsx b/src/packages/checkboxgroup/checkboxgroup.tsx index a4f5233..2ccb8f8 100644 --- a/src/packages/checkboxgroup/checkboxgroup.tsx +++ b/src/packages/checkboxgroup/checkboxgroup.tsx @@ -4,12 +4,14 @@ import bem from '@/utils/bem' export interface CheckBoxGroupProps { disabled: boolean checkedValue: string[] + max: number | undefined onChange: (value: string[]) => void } const defaultProps = { disabled: false, checkedValue: [], + max: undefined, onChange: (value: string[]) => {}, } as CheckBoxGroupProps export const CheckboxGroup = React.forwardRef( @@ -20,25 +22,36 @@ export const CheckboxGroup = React.forwardRef( ) => { const { children } = { ...defaultProps, ...props } const b = bem('checkboxgroup') - const { className, disabled, onChange, checkedValue, ...rest } = props + const { className, disabled, onChange, checkedValue, max, ...rest } = props const [innerDisabled, setInnerDisabled] = useState(disabled) const [innerValue, setInnerValue] = useState(checkedValue) - useImperativeHandle(ref, () => ({ + useImperativeHandle(ref, () => ({ toggleAll(state: boolean) { - console.log(state) if (state === false) { setInnerValue([]) } else { const childrenLabel: string[] = [] React.Children.map(children, (child) => { const childProps = (child as any).props + console.log(child) childrenLabel.push(childProps.label || (child as any).children) }) setInnerValue(childrenLabel) } }, + toggleReverse() { + const childrenLabel: string[] = [] + React.Children.map(children, (child) => { + const childProps = (child as any).props + childrenLabel.push(childProps.label || (child as any).children) + }) + const reverse: string[] = childrenLabel.filter( + (c) => innerValue?.findIndex((v) => v === c) === -1 + ) + setInnerValue(reverse) + }, })) useEffect(() => { @@ -47,6 +60,7 @@ export const CheckboxGroup = React.forwardRef( }, [disabled, checkedValue]) function handleChildChange(state: boolean, label: string) { + if (max !== undefined && innerValue && innerValue.length > max) return if (innerValue) { let clippedValue = [] if (state) { @@ -65,6 +79,10 @@ export const CheckboxGroup = React.forwardRef( return innerValue?.indexOf(child.props.label || child.children) > -1 } + function getParentVals() { + return innerValue + } + function cloneChildren() { return React.Children.map(children, (child: any) => { const childChecked = validateChildChecked(child) @@ -75,6 +93,8 @@ export const CheckboxGroup = React.forwardRef( disabled: innerDisabled, checked: childChecked, onChange: handleChildChange, + getParentVals, + max, }) }) } diff --git a/src/packages/icon/icon.tsx b/src/packages/icon/icon.tsx index 2f06c2c..ff74654 100644 --- a/src/packages/icon/icon.tsx +++ b/src/packages/icon/icon.tsx @@ -8,13 +8,15 @@ interface IconProps { color: string tag: keyof ReactHTML click: (e: MouseEvent) => void + fontClassName: string className: string } const defaultProps = { name: '', size: '', - classPrefix: 'nutui-iconfont', + classPrefix: 'nutui-icon', + fontClassName: 'nutui-iconfont', color: '', tag: 'i', click: (e: MouseEvent) => {}, @@ -36,6 +38,7 @@ export const Icon: FunctionComponent< tag, children, className, + fontClassName, style, click, ...rest @@ -61,7 +64,9 @@ export const Icon: FunctionComponent< { className: isImage ? `${className || ''} ${b('img')}` - : `${className || ''} ${b(null, [classPrefix])} nut-icon-${name} `, + : `${className || ''} ${fontClassName} ${b(null, [ + classPrefix, + ])} nut-icon-${name} `, style: { color, fontSize: pxCheck(size), diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ca9675a..beb97e8 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -315,8 +315,12 @@ $steps-process-icon-text-color: $primary-color !default; $dialog-width: 296px; // checkbox -$checkbox-label-color: #1d1e1e; -$checkbox-label-disable-color: #999; +$checkbox-label-color: #1d1e1e !default; +$checkbox-label-disable-color: #999 !default; +$checkbox-icon-disable-color: #d6d6d6 !default; +$checkbox-label-margin-left: 15px !default; +$checkbox-label-font-size: 14px !default; +$checkbox-icon-font-size: 18px !default; //radio $radio-label-font-color: #1d1e1e !default; -- GitLab