weex-nuke/src/node_modules/nuke-view/docs/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# View 可设置颜色，布局，圆角，简单线性渐变等

- order: 0
- title_en: set color, layout, rounded corners, simple linear gradient...

可设置颜色，布局，圆角，简单线性渐变等。

---
```js
<NukePlayGround>
  <View
    style={[{
      backgroundColor: '#3089dc',
      borderTopWidth: '2px',
      borderTopColor: 'red',
      width: 200,
      height: 200
    },
    lineGradient('right', '#ff9a9e', '#fad0c4')]}
  />
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Page from 'nuke-page';
import Text from 'nuke-text';

function lineGradient(direction, start, end) {
  return {
    backgroundImage: `linear-gradient(to ${direction},${start},${end})`
  };
}
class Demo extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <Page title="View">
        <Page.Intro main="background color" />
        <View
          style={{
            backgroundColor: '#3089dc',
            borderTopWidth: '2px',
            borderTopColor: 'red',
            width: 200,
            height: 200
          }}
        />
        <Page.Intro main="Line Gradient" />
        <View style={styles.line}>
          <View style={styles.unit}>
            <Text style={styles.text}>right</Text>
            <View style={[styles.box, lineGradient('right', '#ff9a9e', '#fad0c4')]} />
          </View>
          <View style={styles.unit}>
            <Text style={styles.text}>left</Text>
            <View style={[styles.box, lineGradient('left', '#ff9a9e', '#fad0c4')]} />
          </View>
        </View>
        <View style={styles.line}>
          <View style={styles.unit}>
            <Text style={styles.text}>bottom</Text>
            <View style={[styles.box, lineGradient('bottom', '#fbc2eb', '#a6c1ee')]} />
          </View>
          <View style={styles.unit}>
            <Text style={styles.text}>top</Text>
            <View style={[styles.box, lineGradient('top', '#fbc2eb', '#a6c1ee')]} />
          </View>
        </View>

        <View style={styles.line}>
          <View style={styles.unit}>
            <Text style={styles.text}>top right</Text>
            <View style={[styles.box, lineGradient('top right', '#ff0844', '#ffb199')]} />
          </View>
          <View style={styles.unit}>
            <Text style={styles.text}>bottom left</Text>
            <View style={[styles.box, lineGradient('bottom left', '#ff0844', '#ffb199')]} />
          </View>
        </View>
        <Page.Intro main="Box Shadow" />
        <View style={styles.line}>
          <View style={styles.unit}>
            <Text style={styles.text}>normal</Text>
            <View
              style={[
                styles.box,
                lineGradient('right', '#ff9a9e', '#fad0c4'),
                { boxShadow: '10 8 5 rgba(0, 0, 0, 0.4)' }
              ]}
            />
          </View>
          <View style={styles.unit}>
            <Text style={styles.text}>inset</Text>
            <View
              style={[
                styles.box,
                lineGradient('left', '#ff9a9e', '#fad0c4'),
                { boxShadow: 'inset 10 8 5 rgba(0, 0, 0, 0.4)' }
              ]}
            />
          </View>
        </View>
      </Page>
    );
  }
}

const styles = {
  box: {
    margin: 50,
    height: 200,
    width: 200,
    borderRadius: 100
  },
  line: {
    flexDirection: 'row'
  },
  unit: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#666666',
    paddingTop: 30,
    fontSize: '10rem'
  }
};
render(<Demo />);
```