зеркало из https://github.com/telerik/blazor-docs.git
Added new kb article radialgauge-center-label (#2497)
* Added new kb article radialgauge-center-label * Update knowledge-base/radialgauge-center-label.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
This commit is contained in:
Родитель
efb1b6a813
Коммит
a923c69b0d
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
title: Adding a Center Label in the RadialGauge
|
||||
description: This article demonstrates how to add and center a label on the RadialGauge component in a Blazor application.
|
||||
type: how-to
|
||||
page_title: How to Center a Label on a RadialGauge in Blazor Applications
|
||||
slug: radialgauge-center-label
|
||||
tags: radialgauge, blazor, label, center, css, positioning
|
||||
res_type: kb
|
||||
ticketid: 1669777
|
||||
---
|
||||
|
||||
## Environment
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Product</td>
|
||||
<td>RadialGauge for Blazor</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
How to add a centered label to the RadialGauge component?
|
||||
|
||||
## Solution
|
||||
|
||||
To add and center a label on the RadialGauge, wrap the RadialGauge inside a `div` element and use a `span` element for the label. Afterward, apply CSS styles to these elements for appropriate positioning.
|
||||
|
||||
````RAZOR
|
||||
<div style="position: relative; width: 500px; height: 300px;">
|
||||
<TelerikRadialGauge>
|
||||
<RadialGaugeScales>
|
||||
<RadialGaugeScale>
|
||||
<RadialGaugeScaleRanges>
|
||||
<RadialGaugeScaleRange From="10" To="20" Color="red"></RadialGaugeScaleRange>
|
||||
</RadialGaugeScaleRanges>
|
||||
</RadialGaugeScale>
|
||||
</RadialGaugeScales>
|
||||
<RadialGaugePointers>
|
||||
<RadialGaugePointer Value="20"></RadialGaugePointer>
|
||||
</RadialGaugePointers>
|
||||
</TelerikRadialGauge>
|
||||
|
||||
<!-- Label centered under the Radial Gauge -->
|
||||
<div style="position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center;">
|
||||
<span style="font-size: 16px; color: #333;">100 HRS</span>
|
||||
</div>
|
||||
</div>
|
||||
````
|
||||
|
||||
## See Also
|
||||
|
||||
- [Radial Gauge Overview](https://docs.telerik.com/blazor-ui/components/gauges/radial/overview)
|
Загрузка…
Ссылка в новой задаче