链接组件,可以视为一个带图标的a
标签。
/**
* Author: ひまわり(dtysky<dtysky@outlook.com>)
* Github: https://github.com/dtysky
* Created: 17/1/3
*/
import React from 'react';
import {Link} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';
/**
* @en
* Base
*
* Use `icon` to choose your favorite icon, `size` to define size, `className` and `style` to cover the defaults.
*
* @cn
* 基础
*
* 使用`icon`选择你喜欢的icon、`size`去定义大小,并用`className`和`style`来覆盖默认值。
*/
export default () => (
<div>
<ExampleBlock>
<Link
id={'link1'}
href={'#link1'}
>
Link1
</Link>
<br />
<Link
id={'link2'}
href={'#link2'}
style={{
display: 'block',
margin: 32
}}
>
Link2
</Link>
</ExampleBlock>
</div>
);
使用icon
选择你喜欢的icon、size
去定义大小,并用className
和style
来覆盖默认值。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | string | 根组件的class。 | |
style | object | 根组件的样式。 | |
href * | string | 链接的地址。 | |
icon | string | 'hana' | 图标名称。 |
size | enum: 'small' 'middle' 'large' |
'middle' | 组件的尺寸。 |
children | node | 链接的内容,默认为空。 |
未在文档中说明的属性将会被自动加到根元素或form元素上。