Anchor
Definition
<cst-anchor>
<sub-label />
<sub-help-icon />
</cst-anchor>
Example
<cst-anchor id="" title="" href="">
<sub-label text="" />
<sub-help-icon name="help" position="right" title="" link=""/>
</cst-anchor>
OR
<cst-element name="anchor" schema="" schema-prop="" value=""/>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component |
| title | string type | Tooltip |
| disabled | boolean type | Specifies if link has to be disabled.(aurelia ext attribute) |
| href | string type | Url to redirect on link click. |
| class | cst-mat-anchor cst-mat-anchor-tooltip cst-mat-anchor-tooltip-dark | Specifies class to be applied(Multiple classes can be given with space). |
| string type | Specifies text to display. | |
| object type | Specifies help icon to be displayed. | |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-label
| Property | Value | Description |
|---|---|---|
| text | string type | Specifies text to display. |
sub-help-icon
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
| link | string type | Link to be opened on click. |
Schema Examples
Example1
let schema = {
type: "object",
properties: {
redirectTo: {
type: "string",
title:"Click Here",//= tooltip
cstAttr: {
elementName: 'anchor',
raw:{ //loop & add to element
disabled : true,
class:'',
href: '' //redirection link
},
subLabel: {
text: 'Click Here To Redirect'
}
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
}
}
}
}
let schemaProp = 'redirectTo';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Unit test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Points
- Shows anchor with given label, link and tooltip