2017-09-27 9 views
0

RichTooltipコントロールを使用して、UI5の表の各グリッドにツールチップテキストを設定したいとします。また、テキストを太字または斜体のhtmlタグを含むテキストのように適切な書式にしたい場合、同じ方法でデータを表示する必要があります。例:text="<b>hello</b> <i>world</i>"は、太字でhello、斜体でと表示されます。RichTooltipを使用してHTML5タグを含む書式付きテキストをUI5で表示する方法

+0

最初に私の疑問をクリアするのは、RichTooltipコントロールを使って行うことが可能か、それともui5に他のコントロールがありますか? – anitab

+0

はい、[]コントロールを使って行うことができます。[HTMLエンティティ](https://www.w3schools.com/charsets/ref_html_entities_4.asp)を使ってHTMLをレンダリングすることができます。あなたは[sap.ui.core.HTML](https://sapui5.hana.ondemand.com/#/sample/sap.ui.core.sample.Html/preview)を参照することができます – inizio

答えて

1

RichTooltipは、ライブラリsap.ui.commonsが推奨されていないため、もう使用しないでください。代わりに、Popoverに行ってください。あなたが本当にする必要がある場合は、Popoverとonmouseoverを組み合わせることができます。なぜならpoor accessibilitydiscoverabilityのUXの観点https://stackoverflow.com/a/45490191/5846045

それにも関わらず、mouseoverイベントの背後に隠れた情報が考えられている悪い習慣:

ツールチップは、デスクトップデバイスに限定されているここでの例です。 [...]決して重要な情報を含むべきではありません。また、冗長な情報を含んではいけません。

Toolitpsは、小さな説明コンテンツを表示するためにのみ使用してください。しかし、「豊富な」ツールチップのようなアプローチは、開発者が関連する情報を隠すことを奨励します。注

sap.ui.require([ 
 
    "sap/m/FormattedText", 
 
    "sap/ui/core/HTML" 
 
], function(FormattedText, HTML) { 
 

 
    new FormattedText({ 
 
    htmlText: "<strong>Hello</strong> <em>world</em>" 
 
    }).placeAt("content"); 
 

 
    new HTML({ 
 
    content: "<b>Hello</b> <i>world</i>" 
 
    }).placeAt("content"); 
 

 
});
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"></script> 
 
<body class="sapUiBody" id="content"></body>


フォーマットされたテキストを表示するために、あなたがコントロールFormattedTextまたはHTMLを使用することができますXMLViewで、文字<がでエスケープする必要があります&lt;

+0

ありがとう、それは私のすべてをクリアこのトピックに関連する疑問点 – anitab

+0

Popoverと吹き出しコントロールを使用してツールチップを表示する方法の違いを誰にでも教えてもらえますか?このコンセプトに関する詳しい説明は、処理とパフォーマンスの面で大変感謝しています。 – anitab

+0

@anitabしかし、* IMO *はメンテナンス費用のため、廃止されたコントロール(RichTooltipsや[Callout](https://openui5.hana.ondemand.com/#/api/sap.ui.commons.Callout)など)は避けるべきですいずれにしてもxよりやや優れているとします。 – boghyon

関連する問題