# Link Demo

* order: 0

所有使用方法集合

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Link from 'nuke-link';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <Page title="Link">
        <Page.Intro main="普通跳转" />
        <Link
          style={styles.linkItem}
          activeStyle={styles.activeStyle}
          target="_blank"
          href="https://m.taobao.com"
        >
          新窗口跳转到h5页面
        </Link>

        <Page.Intro main="常见协议支持" />
        <Link
          fixedFont
          optimizeLineHeight
          style={styles.linkItem}
          activeStyle={styles.activeStyle}
          href="mailto:yichen.test@163.com"
        >
          ยังไมีนี้ให้ลูอื่ห็
        </Link>
        <Link
          style={styles.linkItem}
          activeStyle={styles.activeStyle}
          href="sms:10086"
        >
          <Text style={[styles.linkInnerText, { color: '#666666' }]}>
            ยังไมีนี้ให้ลูอื่ห็支持 sms:{' '}
          </Text>
          <Text style={[styles.linkInnerText, { color: '#EB7E10' }]}>
            10086
          </Text>
        </Link>
      </Page>
    );
  }
};
const styles = {
  linkItem: {
    flexDirection: 'row',
    marginTop: '30rem',
    fontSize: '28rem',
    marginLeft: '42rem',
    backgroundColor: '#3089dc'
  },
  activeStyle: {
    color: 'red'
  },
  linkInnerText: {
    fontSize: '28rem',
    color: '#3089dc'
  },
  linkItemText: {
    fontSize: '36rem',
    color: '#EB7E10'
  }
};

render(<App />);
```