2019-06-21 16:02:16 +00:00
# Link
## Usage
```js
import { Link } from 'asc-web-components';
```
#### Description
It is a link with 2 types:
1) page - simple link which refer to other pages and parts of current page;
2019-06-25 14:14:55 +00:00
2) action - link, which usually hasn`t hyperlink and do anything on click - open dropdown, filter data, etc
2019-06-21 16:02:16 +00:00
#### Usage
```js
< Link type = "page" color = "black" href = "https://github.com" isBold = {true} > Bold page link< / Link >
```
#### Properties (common)
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
| `type` | `oneOf` | - | action, page | `page` | Type of link |
2019-06-25 14:14:55 +00:00
| `color` | `oneOf` | - | gray, black, blue| `black` | Color of link in all states - hover, active, visited |
| `fontSize` | `number` | - | - | `12` | Font size of link (in px) |
| `href` | `string` | - | - | `undefined` | Hyperlink, usually used in *page* type |
2019-06-21 16:02:16 +00:00
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `title` | `string` | - | - | - | Title of link |
2019-06-25 14:14:55 +00:00
| `target` | `oneOf` | - | _blank, _self, _parent, _top | - | The *target* attribute specifies where the linked document will open when the link is clicked. | |
2019-06-21 16:02:16 +00:00
| `isTextOverflow` | `bool` | - | - | `true` |Activate or deactivate *text-overflow* CSS property with ellipsis (' … ') value |
| `isHovered` | `bool` | - | - | `false` | Show hovered state of link. Only for demo |
2019-06-25 14:14:55 +00:00
|
2019-06-28 08:37:13 +00:00
| `text` | `string` | - | - | - | Text of link |
|
2019-06-21 16:02:16 +00:00
#### Properties (only for \'action\' type of link)
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- |
2019-06-25 14:14:55 +00:00
| `dropdownType` | `oneOf` | - | alwaysDotted, appearDottedAfterHover, none | `none` | Type of dropdown: *none* is neither, *alwaysDotted* is always show dotted style and icon of dropdown, *appearDottedAfterHover* is show dotted style and icon of dropdown only after hover |
| `onClick` | `func` | - | - | - | What the link will trigger when clicked - open/close dropdown, filter, popup, etc
