.. | ||
base.link.stories.js | ||
README.md |
Link
Usage
import { Link } from 'asc-web-components';
Description
It is a link with 2 types:
- page - simple link which refer to other pages and parts of current page;
- action - link, which usually hasn`t hyperlink and do anything on click - open dropdown, filter data, etc
Usage
<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 |
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 |
isBold |
bool |
- | - | false |
Set font weight |
title |
string |
- | - | - | Title of link |
target |
oneOf |
- | _blank, _self, _parent, _top | - | The target attribute specifies where the linked document will open when the link is clicked. |
isTextOverflow |
bool |
- | - | true |
Activate or deactivate text-overflow CSS property with ellipsis (' … ') value |
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 |
text |
string |
- | - | - | Text of link |
Properties (only for 'action' type of link)
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
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 |