File

src/link/link.directive.ts

Description

A convenience directive for applying styling to a link. Get started with importing the module:

Example :
import { LinkModule } from 'carbon-components-angular';
Example :
<a href="#" cdsLink>A link</a>

See the vanilla carbon docs for more detail.

See demo

Metadata

Index

Properties
Inputs
HostBindings
Accessors

Inputs

disabled
Type : boolean

Set to true to disable link.

inline
Type : boolean
Default value : false

Set to true to show links inline in a sentence or paragraph.

HostBindings

attr.tabindex
Type : any

Automatically set to -1 when link is disabled.

class.cds--link
Type : boolean
Default value : true

Properties

Private _disabled
baseClass
Default value : true
Decorators :
@HostBinding('class.cds--link')
tabindex
Decorators :
@HostBinding('attr.tabindex')

Automatically set to -1 when link is disabled.

Accessors

disabled
getdisabled()
setdisabled(disabled: boolean)

Set to true to disable link.

Parameters :
Name Type Optional
disabled boolean No
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 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;
}

results matching ""

    No results matching ""