# Link 示例

- order: 0
- title_en: Link usage

---

```js
<NukePlayGround>
  //goes to web page
  <Link href="some url">
    <Text>name:</Text> <Text>Nuke</Text>
  </Link>
  // or goes to other protocals
  <Link href="mailto:someone@someone.com">email</Link>
  <Link href="sms:10086">send a sms message</Link>
  <Link href="tel:10086">make a call</Link>
</NukePlayGround>
```

---

```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="normal" />
        <Link style={styles.linkItem} activeStyle={styles.activeStyle} target="_blank" href="https://m.taobao.com">
          goes to taobao msite
        </Link>

        <Page.Intro main="protocals" />
        <Link
          fixedFont
          optimizeLineHeight
          style={styles.linkItem}
          activeStyle={styles.activeStyle}
          href="mailto:someone@someone.com">
          mails
        </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: 30,
    fontSize: 28,
    marginLeft: 42,
    backgroundColor: '#3089dc'
  },
  activeStyle: {
    color: 'red'
  },
  linkInnerText: {
    fontSize: 28,
    color: '#3089dc'
  },
  linkItemText: {
    fontSize: 36,
    color: '#EB7E10'
  }
};

render(<App />);
```