4.7 KiB
4.7 KiB
Link
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
import Link from "@appserver/components/link";
<Link type="page" color="black" href="https://github.com" isBold={true}>
Bold page link
</Link>
Properties
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 |
type |
oneOf |
- | action , page |
page |
Type of link s |