【新特性速遞】指定提示資訊的顯示位置(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/

三石出品,必屬精品 

相關文章