callstack / callstack/react-native-paper

Feat: Allow text styling in Segmented Button's label

未关闭
#4,091 1 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
feature request SegmentedButtons
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

**Is your feature request related to a problem? Please describe.**

We would like to add support for 'rich text' to the [SegmentedButtons](https://callstack.github.io/react-native-paper/docs/components/SegmentedButtons/) control, so that parts of the text can be given a different font weight. This should also depend on selection state

**Describe the solution you'd like**

1. Change the type of the `label` property from `string` to `ReactNode`
2. Alternatively, add an optional `LabelComponent` or `renderLabel` callback that returns a react component, which is passed the relevant props. We'd also need a way to pass our custom 'sublabel' property then.

**Describe alternatives you've considered**

- Copy / pasting the component into our own project and making the adjustments ourselves, but there's a lot of internal dependencies that we'd have to copy as well.

**Additional context**

Here's what our designer would like to see possible:

![image](https://github.com/callstack/react-native-paper/assets/394435/642457ff-e040-47b6-a663-9bcd7a6f01ed)

Note the bold "Stroom" vs the regular "(kWh)"

And more variants, with and without icons, selected / deselected, and disabled states:

![image](https://github.com/callstack/react-native-paper/assets/394435/51241d77-4339-4688-be70-2a89dd4b61e4)

All these are mostly possible already, bar the bold text style. For now we'll give feedback to the developer that it's not possible yet. I can have a go at submitting a PR myself if I can find some headspace to work on it.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。