weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
178 lines (168 loc) • 5.99 kB
Markdown
# 包含字号，颜色，字重，固定单位等
- order: 0
- title_en: Contains the font size, color, word weight, fixed unit
包含字号，颜色，字重，固定单位等
---
```js
<NukePlayGround>
<Text>Different from a "web app"</Text>
<Text fixedFont={true} style={[styles.resultText, { fontSize: 28 }]}>28 号字</Text>
// 超出一行隐藏
<Text numberOfLines={1} style={[styles.blockText, { lineHeight: 48, height: 48 }]}>{LongText}</Text>
</NukePlayGround>
```
---
```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Page from 'nuke-page';
const FontSizeArr = [
{ name: 'FootNote', size: 10 },
{ name: 'Caption', size: 12 },
{ name: 'Body', size: 14 },
{ name: 'SubHead', size: 16 },
{ name: 'HeadLine', size: 18 },
{ name: 'Display', size: 28 }
];
const shortText1 = 'Different from a "web app"';
const shortText2 =
'Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript.';
const LongText =
'Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript. But underneath, the core of the application is Objective-C or Java. At the same time, Weex will provide a lot of native components or modules for developers to use.';
const rtlText = 'مرحبا كيف حالك؟';
class TextDemo extends Component {
constructor() {
super();
}
render() {
return (
<Page title="Text">
<Page.Intro main="Normal" />
{FontSizeArr.map((item, index) => {
return (
<View style={styles.textLine}>
<View style={styles.label}>
<Text style={styles.labelText}>{item.name}</Text>
</View>
<View style={styles.result}>
<Text style={[styles.resultText, { fontSize: item.size * 2 + 'rem' }]}>常规 {item.size * 2} rem</Text>
</View>
</View>
);
})}
<Page.Intro main="国际化" sub="RTL" />
<View style={styles.textLine}>
<View style={styles.label}>
<Text style={styles.labelText}>阿拉伯语</Text>
</View>
<View style={styles.result}>
<Text fixedFont={true} style={[styles.resultText, { fontSize: 28, textAlign: 'right', direction: 'rtl' }]}>
{rtlText}
</Text>
</View>
</View>
<Page.Intro main="固定字号，第一行固定，第二行自适应" sub="仅 native 生效" />
<View style={styles.textLine}>
<View style={styles.label}>
<Text style={styles.labelText}>28</Text>
</View>
<View style={styles.result}>
<Text fixedFont={true} style={[styles.resultText, { fontSize: 28 }]}>
28 号字
</Text>
<Text style={[styles.resultText, { fontSize: 28 }]}>28 号字</Text>
</View>
</View>
<View style={styles.textLine}>
<View style={styles.label}>
<Text style={styles.labelText}>32</Text>
</View>
<View style={styles.result}>
<Text fixedFont={true} style={[styles.resultText, { fontSize: 32 }]}>
32 号字
</Text>
<Text style={[styles.resultText, { fontSize: 32 }]}>32 号字</Text>
</View>
</View>
<View style={styles.textLine}>
<View style={styles.label}>
<Text style={styles.labelText}>40</Text>
</View>
<View style={styles.result}>
<Text fixedFont={true} style={[styles.resultText, { fontSize: 40 }]}>
40 号字
</Text>
<Text style={[styles.resultText, { fontSize: 40 }]}>40 号字</Text>
</View>
</View>
<Page.Intro main="超出 1 行隐藏" />
<View style={styles.paddingBlock}>
<View style={styles.block}>
<Text numberOfLines={1} style={[styles.blockText, { lineHeight: 48, height: 48 }]}>
{LongText}
</Text>
</View>
</View>
<Page.Intro main="超出 3 行隐藏" />
<View style={styles.paddingBlock}>
<View style={styles.block}>
<Text numberOfLines={3} style={[styles.blockText, { lineHeight: 48, height: 48 * 3 }]}>
{LongText}
</Text>
</View>
</View>
<Page.Intro main="最多 2 行，可 1-2 行，超出隐藏" />
<View style={styles.paddingBlock}>
<View style={[styles.block, { maxHeight: 48 * 2 }]}>
<Text numberOfLines={2} style={[styles.blockText, { lineHeight: 48, maxHeight: 48 * 2 }]}>
{shortText1}
</Text>
</View>
</View>
<View style={styles.paddingBlock}>
<View style={[styles.block, { maxHeight: 48 * 2 }]}>
<Text numberOfLines={2} style={[styles.blockText, { lineHeight: 48, maxHeight: 48 * 2 }]}>
{shortText2}
</Text>
</View>
</View>
</Page>
);
}
}
const styles = {
textLine: {
justifyContent: 'center',
alignItems: 'center',
paddingLeft: '40rem',
paddingRight: '40rem',
marginTop: '30rem',
flexDirection: 'row'
},
label: {
width: '150rem'
},
labelText: {
color: '#ea118d',
fontSize: '20rem'
},
paddingBlock: {
flexDirection: 'column',
padding: 30,
paddingBottom: 50
},
block: {
flex: 1,
backgroundColor: '#cccccc'
},
blockText: {
fontSize: 28,
textOverflow: 'ellipsis',
overflow: 'hidden',
color: '#333333'
}
};
render(<TextDemo />);
```