简体中文

链接

链接组件,可以视为一个带图标的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去定义大小,并用classNamestyle来覆盖默认值。

属性说明

属性名 类型 默认值 说明
className string 根组件的class。
style object 根组件的样式。
href * string 链接的地址。
icon string 'hana' 图标名称。
size enum:
 'small'
 'middle'
 'large'
'middle' 组件的尺寸。
children node 链接的内容,默认为空。

未在文档中说明的属性将会被自动加到根元素或form元素上。