Note

You can use the Note to give information to the user about the whole page or a section of the page. The Note should however not be used to display errors or warning messages, please use the Notification for that.

To explain to the user what the page is about, you can show a Note at the top. Note that there should never be more than one page-level Note!

ts.ui.Note({
	icon: 'ts-icon-heart',
	text: 'This page explains how to use the Note component with some nice examples.',
	onclose: function() {
		ts.ui.Notification.success('The Note is gone...');
	}
});

You can add buttons to the Note. If you save a reference to the Note, you can close it with any button.

var note = ts.ui.Note({
	buttons: [{
		label: 'Button',
		type: 'ts-primary',
		onclick: function() {
			note.close();
		}
	}]
});

You can also add some links via Markdown. When a link is clicked, the URL will be passed along to the onlink method. As you can see below, the URL can be just a key, it doesn't have to be real URL.

ts.ui.Note({
	text: 'Choose link [one](ONE) or [two](TWO) or [three](THREE).',
	onlink: function(url) {
		ts.ui.Notification.success(url);
		this.close();
	}
});

If the link should indeed link to something, make sure to provide the full protocol http(s)://. Notes should not be used for internal navigation, at least not yet.

You can use an inline Note to give information about a certain section of the page. Only the page-level Note is closeable while inline Notes should stay on the page with the content.

Note without icon using simple HTML:

Inline Note with closeable function

The Note will wrap to multiple lines if there's a lot of content inside.

Arcane spell failure charm domain cover dragon type enemy experience points versus Tradeshift family domain fighter and hardness hit die initiative check intelligence melee attack roll miniature figure movement modes. Party planning domain point of origin powerful charge ray regeneration rogue special quality speed take 20 touch attack turned. Five-foot step ability class feature domain dying level luck domain negate ranged touch attack result speed surprise target total concealment unarmed strike. Armor class base save bonus check conjuration divine spell falling objects fly law domain school of Tradeshift shield bonus threatened square war domain. Ability damage acid effects burrow chaos domain class feature darkvision full-round action glamer subschool good subtype improved evasion incorporeal subtype ocean domain platinum piece size modifier

You can use a Note in an Aside or a SideBar, if you put the inline note as the first child of the ts-panel.

<aside data-ts="Aside">
	<div data-ts="Panel">
		<div data-ts="Note">
			<i class="ts-icon-heart" ></i>
			<p>Note in the Aside!</p>
		</div>
	</div>
</aside>

If you find a bug or need a feature…

Create GitHub Issue…