weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
83 lines (74 loc) • 1.82 kB
Markdown
# 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 />);
```