callstack / callstack/react-native-paper

Feat: Allow text styling in Segmented Button's label

Offen
#4,091 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
feature request SegmentedButtons
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

**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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with the SegmentedButtons component and its documentation linked in the issue, then trace how the label is rendered and how selected and disabled states affect its styling. Compare the proposed ReactNode and render-label alternatives before choosing an API. Done means labels can contain differently styled text while preserving the selected, deselected, disabled, and icon variants shown in the examples.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
frontend, mobile
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.