callstack / callstack/react-native-paper

Feat: Allow text styling in Segmented Button's label

オープン
#4,091 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
feature request SegmentedButtons
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。