LinearGauge
値の編集
機能
サンプル
設定
説明
この例は、LinearGauge コントロールで IsReadOnly プロパティと Step プロパティを使用する方法を示します。
ShowTicks:ゲージに各ステップで目盛りを表示するかtickSpacing値を表示するかを決定します。
ShowTickText:ゲージに各目盛りのテキスト値を表示するかどうかを決定します。
HandleWheel:ユーザーがマウスホイールでゲージの値を編集できるかどうかを決定します。
ShowTicks:ゲージに各ステップで目盛りを表示するかtickSpacing値を表示するかを決定します。
ShowTickText:ゲージに各目盛りのテキスト値を表示するかどうかを決定します。
HandleWheel:ユーザーがマウスホイールでゲージの値を編集できるかどうかを決定します。
ソース
EditingController.cs
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class LinearGaugeController : Controller
{
public ActionResult Editing()
{
ViewBag.DemoSettings = true;
ViewBag.DemoSettingsModel = new ClientSettingsModel
{
Settings = CreateEditingSettings()
};
return View();
}
private static IDictionary<string, object[]> CreateEditingSettings()
{
var settings = new Dictionary<string, object[]>
{
{"IsReadOnly", new object[]{false, true }},
{"Step", new object[]{0.5, 1, 2}},
{"ShowTicks", new object[]{ false, true}},
{"ShowTickText", new object[]{ false, true}},
{"HandleWheel", new object[]{true, false }}
};
return settings;
}
}
}
Editing.cshtml
@{
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
@section Styles{
<style>
.wj-gauge .wj-tick-text text {
opacity: 1;
font-family: Courier;
font-size: 8pt;
fill: purple;
}
</style>
}
<br />
<c1-linear-gauge id="@demoSettingsModel.ControlId" min="0" max="10" value="5" format="" show-text="All" is-read-only="false" step="0.5" width="500px"
show-ticks="false" show-tick-text="false" handle-wheel="true">
</c1-linear-gauge>
@section Description{
@Html.Raw(LinearGaugeRes.Editing_Text0)
<br />
@Html.Raw(LinearGaugeRes.Editing_Text1)
<br />
@Html.Raw(LinearGaugeRes.Editing_Text2)
<br />
@Html.Raw(LinearGaugeRes.Editing_Text3)
}
マニュアル