Documentation
How to install and use the @qnkur/segmented component.
Installation
To get started, install the component and its peer dependencies.
Quick Start
Import the component and its styles, then use it in your application.
Import the component and styles
Usage with default props
Using the component with default props is straightforward.
~~~~~~~~~~~
Hello!World
Advanced Usage
You can combine several props to create a more customized and advanced display. Refer to the styles for a complete list of supported font families.
888.888
-45.6°C
Examples
See examples.
Props
children
type: React.ReactNode
The content to display inside the component.
fontFamily
type: FontName
default: 'DSEG14ClassicMini'
default: 'DSEG14ClassicMini'
The DSEG font family to use.
fontStyle
type: 'normal' | 'italic'
default: 'normal'
default: 'normal'
The font style.
fontWeight
type: 'light' | 'normal' | 'bold'
default: 'normal'
default: 'normal'
The font weight.
className
type: string
Additional CSS classes to apply to the component.
unlitSegmentOpacity
type: number
default: 15
default: 15
The opacity of the unlit segments (from 0 to 100).