Skip to content

Commit c36a264

Browse files
committed
chore(SegmentedControl): SegmentedControl 设置color属性,文字颜色 (#256)
1 parent 1c0ce07 commit c36a264

File tree

3 files changed

+22
-6
lines changed

3 files changed

+22
-6
lines changed

example/examples/src/routes/SegmentedControl/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class SegmentedControlView extends React.Component<SegmentedContr
3939
</Card>
4040
<Card
4141
title={
42-
'设置自定义文本颜色 textColor?: [选中: string, 未选中: string]'
42+
'设置自定义文本颜色 textColor?: {actived?: string, unactived?: string}'
4343
}>
4444
<SegmentedControl
4545
textColor={['#333', '#ccc']}

packages/core/src/SegmentedControl/README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,18 @@ function Demo() {
7171
| `style` | 自定义样式 | Object | {} |
7272
| `value` | 初始值 | String[] | [] |
7373
| `color` | 组件主色调 | String | `#108ee9` |
74-
| `textColor` | 文本颜色 | [选中颜色: string, 未选中颜色: string] | `[#fff, color]` |
74+
| `textColor` | 文本颜色 | Object: textColorType | - |
7575
| `size` | 按钮尺寸 | `small`, `default`, `large` | `default` |
7676
| `disabled` | 是否启用 | Boolean | `false` |
7777
| `selectedIndex` | 选中项在数组中的索引 | Number | 0 |
7878
| `renderItem` | 自定义单元格 | (data, index, rowNum): void | - |
7979
| `onValueChange` | 回调函数 | (label, selectedIndex): void | - |
80+
81+
82+
## textColorType
83+
84+
| 参数 | 说明 | 类型 | 默认值 |
85+
|------|------|-----|------|
86+
| `actived` | 激活 | String | `#fff` |
87+
| `unactived` | 未激活 | String | `color` |
88+
```ts

packages/core/src/SegmentedControl/index.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@ import { ViewStyle, TextStyle, Text } from 'react-native';
33
import ButtonGroup, { ButtonGroupProps } from '../ButtonGroup';
44
import Button from '../Button';
55

6+
interface textColorType {
7+
actived?: string;
8+
unactived?: string;
9+
}
610
export interface SegmentedControlProps<T> extends ButtonGroupProps {
711
value?: string[] | T[];
812
selectedIndex?: number;
913
renderItem?: (label: string | T, selectedIndex: number, props: ButtonGroupProps) => JSX.Element;
1014
onValueChange?: (label: string | T, selectedIndex: number) => void;
11-
textColor?: [string, string];
15+
textColor?: textColorType;
1216
}
1317

1418
export interface SegmentedControlState {
@@ -40,7 +44,10 @@ export default class SegmentedControl<T> extends Component<SegmentedControlProps
4044
value,
4145
selectedIndex,
4246
renderItem,
43-
textColor = ['#fff', this.props.color ?? '#108ee9'],
47+
textColor = {
48+
actived: '#fff',
49+
unactived: this.props.color ?? '#108ee9',
50+
},
4451
...otherProps
4552
} = this.props;
4653
return (
@@ -49,11 +56,11 @@ export default class SegmentedControl<T> extends Component<SegmentedControlProps
4956
(value as (string | T)[]).map((label: string | T, key: number) => {
5057
const styl: ViewStyle = {};
5158
const textStyle: TextStyle = {};
52-
let textStyleColor: string = textColor[0];
59+
let textStyleColor: string = textColor.actived!;
5360
if (this.state.selectedIndex !== key + 1) {
5461
styl.backgroundColor = '#fff';
5562
textStyle.color = otherProps.color;
56-
textStyleColor = textColor[1];
63+
textStyleColor = textColor.unactived!;
5764
}
5865
const props: ButtonGroupProps = {
5966
type: 'primary',

0 commit comments

Comments
 (0)