src/link/link.directive.ts
A convenience directive for applying styling to a link. Get started with importing the module:
Example :import { LinkModule } from 'carbon-components-angular';<a href="#" cdsLink>A link</a>See the vanilla carbon docs for more detail.
| Selector | [cdsLink], [ibmLink] |
Properties |
Inputs |
HostBindings |
Accessors |
| disabled | |
Type : boolean
|
|
|
Defined in src/link/link.directive.ts:69
|
|
|
Set to true to disable link. |
|
| inline | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/link/link.directive.ts:39
|
|
|
Set to true to show links inline in a sentence or paragraph. |
|
| size | |
Type : "sm" | "md" | "lg"
|
|
|
Defined in src/link/link.directive.ts:44
|
|
|
Set to |
|
| visited | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/link/link.directive.ts:61
|
|
|
Set to |
|
| attr.tabindex |
Type : any
|
|
Defined in src/link/link.directive.ts:33
|
|
Automatically set to |
| class.cds--link |
Type : boolean
|
Default value : true
|
|
Defined in src/link/link.directive.ts:28
|
| class.cds--link--lg |
Type : boolean
|
|
Defined in src/link/link.directive.ts:54
|
| class.cds--link--md |
Type : boolean
|
|
Defined in src/link/link.directive.ts:50
|
| class.cds--link--sm |
Type : boolean
|
|
Defined in src/link/link.directive.ts:46
|
| Private _disabled |
|
Defined in src/link/link.directive.ts:78
|
| baseClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--link')
|
|
Defined in src/link/link.directive.ts:28
|
| tabindex |
Decorators :
@HostBinding('attr.tabindex')
|
|
Defined in src/link/link.directive.ts:33
|
|
Automatically set to |
| sizeSm |
getsizeSm()
|
|
Defined in src/link/link.directive.ts:46
|
| sizeMd |
getsizeMd()
|
|
Defined in src/link/link.directive.ts:50
|
| sizeLg |
getsizeLg()
|
|
Defined in src/link/link.directive.ts:54
|
| disabled | ||||||
getdisabled()
|
||||||
|
Defined in src/link/link.directive.ts:74
|
||||||
setdisabled(disabled: boolean)
|
||||||
|
Defined in src/link/link.directive.ts:69
|
||||||
|
Set to true to disable link.
Parameters :
Returns :
void
|
import {
Directive,
HostBinding,
Input
} from "@angular/core";
/**
* A convenience directive for applying styling to a link. Get started with importing the module:
*
* ```typescript
* import { LinkModule } from 'carbon-components-angular';
* ```
*
* ```html
* <a href="#" cdsLink>A link</a>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.
*
* [See demo](../../?path=/story/components-link--basic)
*/
@Directive({
selector: "[cdsLink], [ibmLink]"
})
export class Link {
@HostBinding("class.cds--link") baseClass = true;
/**
* Automatically set to `-1` when link is disabled.
*/
@HostBinding("attr.tabindex") tabindex;
/**
* Set to true to show links inline in a sentence or paragraph.
*/
@Input()
@HostBinding("class.cds--link--inline") inline = false;
/**
* Set to `sm`, `md`, or `lg` to scale the link typography.
*/
@Input() size: "sm" | "md" | "lg";
@HostBinding("class.cds--link--sm") get sizeSm(): boolean {
return this.size === "sm";
}
@HostBinding("class.cds--link--md") get sizeMd(): boolean {
return this.size === "md";
}
@HostBinding("class.cds--link--lg") get sizeLg(): boolean {
return this.size === "lg";
}
/**
* Set to `true` to apply visited link styling.
*/
@Input() @HostBinding("class.cds--link--visited") visited = false;
/**
* Set to true to disable link.
*/
@Input()
@HostBinding("attr.aria-disabled")
@HostBinding("class.cds--link--disabled")
set disabled(disabled: boolean) {
this._disabled = disabled;
this.tabindex = this.disabled ? -1 : null;
}
get disabled(): boolean {
return this._disabled;
}
private _disabled;
}