callstack / callstack/react-native-paper

Feat: Allow text styling in Segmented Button's label

Abierto
#4,091 1 comentario 1 reacción 0 asignados Ver en GitHub
feature request SegmentedButtons
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.