【新特性速遞】指定提示資訊的顯示位置（ToolTipPosition）

三生石上(FineUI控制元件)發表於2020-08-27

FineUIPro/Mvc/Core的下個版本（v7.0.0），我們可以為提示資訊指定顯示位置了。

 

首先來看下提示資訊的樣式變化，之前版本的純色背景主題，提示資訊是白底黑色，容易和正文文字搞混淆，如下所示：

 【新特性速遞】指定提示資訊的顯示位置（ToolTipPosition）

新版本則變為黑底白字，更加現代化：

【新特性速遞】指定提示資訊的顯示位置（ToolTipPosition）

 

下面來看下如何指定提示資訊的顯示位置，我們新增了ToolTipPosition列舉型別：

public enum ToolTipPosition
{
	/// <summary>
	/// 未定義
	/// </summary>
	Undefined,
	/// <summary>
	/// 頂部居中
	/// </summary>
	Top,
	/// <summary>
	/// 頂部開始
	/// </summary>
	TopStart,
	/// <summary>
	/// 頂部末尾
	/// </summary>
	TopEnd,
	/// <summary>
	/// 底部居中
	/// </summary>
	Bottom,
	/// <summary>
	/// 底部開始
	/// </summary>
	BottomStart,
	/// <summary>
	/// 底部末尾
	/// </summary>
	BottomEnd,
	/// <summary>
	/// 左側居中
	/// </summary>
	Left,
	/// <summary>
	/// 左側開始
	/// </summary>
	LeftStart,
	/// <summary>
	/// 左側末尾
	/// </summary>
	LeftEnd,
	/// <summary>
	/// 右側居中
	/// </summary>
	Right,
	/// <summary>
	/// 右側開始
	/// </summary>
	RightStart,
	/// <summary>
	/// 右側末尾
	/// </summary>
	RightEnd
}

 

並分別為如下控制元件增加了ToolTipPosition相關的屬性：

  • 為Label、LinkButton、Image、HyperLink、Tool新增ToolTipPosition屬性。
  • 為皮膚控制元件增加TitleToolTipPosition屬性。
  • 為表格列增加HeaderToolTipPosition屬性，新增示例：表格控制元件/標題欄/標題欄（提示資訊）。
  • 為表格列BoundField、CheckBoxField、HyperLinkField、ImageField、LinkButtonField、WindowField新增ToolTipPosition屬性。
  • 為表格列RenderField新增ToolTipPosition屬性。

如果未設定ToolTipPosition屬性，則預設顯示在游標的位置。

 

下面看下顯示效果：

【新特性速遞】指定提示資訊的顯示位置（ToolTipPosition）　　

 

來一張動圖，預覽全部顯示位置：

【新特性速遞】指定提示資訊的顯示位置（ToolTipPosition）

 

 

歡迎入夥：https://fineui.com/fans/

三石出品，必屬精品 

相關文章