2019-06-21 16:02:16 +00:00
# Link
2019-11-21 13:24:03 +00:00
It is a link with 2 types:
2019-06-21 16:02:16 +00:00
2019-11-21 13:24:03 +00:00
1. page - simple link which refer to other pages and parts of current page;
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
2019-11-21 13:24:03 +00:00
### Usage
2019-06-21 16:02:16 +00:00
```js
2021-02-25 21:19:45 +00:00
import Link from "@appserver/components/link";
2019-06-21 16:02:16 +00:00
```
2019-11-21 13:24:03 +00:00
```jsx
2020-10-16 13:16:01 +00:00
< Link type = "page" color = "black" href = "https://github.com" isBold = {true} >
2019-11-21 13:24:03 +00:00
Bold page link
< / Link >
```
2019-06-21 16:02:16 +00:00
2019-11-21 13:24:03 +00:00
### Properties
2019-12-24 09:55:36 +00:00
| Props | Type | Required | Values | Default | Description |
| ------------------- | :--------------: | :------: | :--------------------------------------: | :-------------------: | ---------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `color` | `string` | - | - | `#333333` | Color of link |
| `fontSize` | `string` | - | - | `13px` | Font size of link |
| `fontWeight` | `number, string` | - | - | - | Font weight of link |
| `href` | `string` | - | - | `undefined` | Used as HTML `href` property |
| `id` | `string` | - | - | - | Accepts id |
| `isBold` | `bool` | - | - | `false` | Set font weight |
| `isHovered` | `bool` | - | - | `false` | Set hovered state and effects of link. |
| `isSemitransparent` | `bool` | - | - | `false` | Set css-property 'opacity' to 0.5. Usually apply for users with "pending" status |
| `isTextOverflow` | `bool` | - | - | `true` | Activate or deactivate _text-overflow_ CSS property with ellipsis (' … ') value |
| `noHover` | `bool` | - | - | `false` | Disabled hover styles |
| `onClick` | `func` | - | - | - | What the link will trigger when clicked. Only for \'action\' type of link |
| `rel` | `string` | - | - | `noopener noreferrer` | Used as HTML `rel` property |
| `style` | `obj` , `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Used as HTML `tabindex` property |
| `target` | `oneOf` | - | `\_blank` , `\_self` , `\_parent` , `\_top` | - | The _target_ attribute specifies where the linked document will open when the link is clicked. |
| `title` | `string` | - | - | - | Used as HTML `title` property |
2020-10-16 13:16:01 +00:00
| `type` | `oneOf` | - | `action` , `page` | `page` | Type of link s |