Inline components
These components depend on special markup structures and some may expose features though a
JavaScript API. Other than specifying the
data-ts
attribute as shown, there is no need to initialize the components in
any special way.
Button
A true classic, available in several flavors.
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
CompanyCard
A unified way to show companies.
< div data-ts = " CompanyCard" >
< script type = " application/json" >
{
"id" : "6bf17754-f9de-4e31-aa31-bd3ff765b9c2" ,
"data" : {
"name" : "Tradeshift" ,
"logo" : "assets/logo.png" ,
"size" : "100–249" ,
"location" : "San Francisco, California" ,
"industry" : "Software & IT" ,
"connection" : 2
}
}
</ script>
</ div>
Form
Another classic, can't have webapps without them.
< form data-ts = " Form" >
< fieldset>
< label>
< span> Select multiple</ span>
< select multiple >
< option value = " a" selected > One</ option>
< option value = " b" selected > Two</ option>
< option value = " c" > Three</ option>
< option value = " d" > Four</ option>
< option value = " e" > Five</ option>
</ select>
< button> Cool, apply changes!</ button>
</ label>
</ fieldset>
</ form>
Select multiple
One
Two
Three
Four
Five
Cool, apply changes!
Icons
We support
a range of icons. Here are a few
randomly selected ones.
Menu
Not to be confused with the main navigation, this is simply a list of selectable items.
I have an icon on my right
And a second line!
I have an icon on my left, but skipped the second line!
Note
A nice way to inform the user about something on the page. This is
not for status messages! It also works on page-level.
Search
Unified search experience.
TabBar
An easy way to show tabs. Also works on page-level.
< script>
var tabbar = ts. ui. get ( '#tabbar-example' ) ;
tabbar. tabs( [
{
label: "Tab One" ,
onselect : function ( ) {
ts. ui. Notification. success( this . label) ;
}
} ,
{
label: "Tab Two" ,
onselect : function ( ) {
ts. ui. Notification. success( this . label) ;
}
}
] ) ;
</ script>
Table
Ranging from spreadsheet-style editing to just showing some tabular data.
< script>
var table = ts. ui. get ( '#table-example' ) ;
table. cols( [
{ label: 'Level' , type: 'ts-number' } ,
{ label: 'Character' , flex: 2 } ,
{ label: 'Alignment' , flex: 2 } ,
] ) ;
table. rows( [
[ 21 , 'Paladin Knight' , 'Lawful Good' ] ,
[ 13 , 'Barbarian Queen' , 'Neutral Evil' ] ,
[ 11 , 'Global Senior Vice President of Sales' , 'Chaotic Evil' ]
] ) ;
</ script>
Tags & Labels
A set of interactive keywords that help to label, organize, and categorize objects.
< script>
const data = ts. ui. encode(
[
[ 'Vision' , [ 'Blindsight' , 'Truesight' , 'Darkvision' ] ]
]
) ;
ts. ui. ready( ( ) = > {
ts. ui. get ( '#tag-clickable' , tag = > {
tag. onclick = ( ) = > {
ts. ui. Notification. success( 'Do you see?' ) ;
} ;
} ) ;
} ) ;
</ script>
Time
Human readable time formatting.