DocSpace-client/web/ASC.Web.Components/example/stories/link/base

Link

Usage

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;
2. 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, filter, profile	black	Color of link in all states - hover, active, visited
fontSize	string	-	-	12px	Font size of link
href	string	-	-	javascript:void(0)	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.
rel	string	-	-	'noopener noreferrer' if target === '_blank'	The rel attribute specifies the relationship between the current document and the linked document. Only used if the href attribute is present.
isTextOverflow	bool	-	-	true	Activate or deactivate text-overflow CSS property with ellipsis (' … ') value
isHovered	bool	-	-	false	Show hovered state of link. Only for demo
onClick	func	-	-	-	What the link will trigger when clicked. Usually use in action type

Properties (only for 'action' type of link)

Props	Type	Required	Values	Default	Description
isDotted	bool	-	-	-	Add dots decoration under link in usual and visited state
isHoverDotted	bool	-	-	-	Add dots decoration under link in hovered state
isDropdown	bool	-	-	-	Add dropdown
dropdownType	oneOf	-	filter, menu, none	none	Type of dropdown
dropdownColor	oneOf	-	filter, profile, sorting,number,email, group	filter	Color of dropdown
dropdownRightIndent	string	-	-	-10px	The right property affects the horizontal position of a dropdown
displayDropdownAfterHover	bool	-	-	false	Set appearance dropdown icon when hover