LineWeight

The LineWeight category in the @bentley/ui-components package includes classes and components for working with and picking a Line Weight.

Component Description
LineWeightSwatch displays a line weight swatch in a button
WeightPickerButton used to pick a line weight from an array of available weights

WeightPickerButton Sample

The following sample shows the WeightPickerButton component used to pick a line weight.

State

interface State {
  . . .
  weight: number;
}

render() Method

<WeightPickerButton activeWeight={this.state.weight} onLineWeightPick={this._handleWeightChange} />

Handler Function

private _handleWeightChange = (value: number) => {
  this.setState({weight: value});
}

WeightPickerButton

Note: The properties for the WeightPickerButton are defined in the WeightPickerProps interface. The optional weights prop may be used to provide the available weights.

API Reference

Last Updated: 11 June, 2024