@terminus/ui-option
v2.0.0
Published
<h1>Option & Optgroup</h1>
Downloads
9
Keywords
Readme
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-optionCSS imports
In your top level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
<ts-option value="My value!">My value!</ts-option>Optgroup
<ts-select-optgroup label="My optgroup">
<ts-option value="My value!">My value!</ts-option>
</ts-select-optgroup>Display directive
If options are complex, the tsOptionDisplay directive can be used to mark which part of the option should be used as
the selected label.
<ts-option value="My value!">
<div>
<!-- Only the contents inside the element the directive is on will be used: "My Value!" -->
<span tsOptionDisplay>My Value!</span>
<p>A description</p>
</div>
My value!</ts-option>