weex-nuke/docs/core/demo/basic.md

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

# Core 函数 demo

- order: 0
- title_en : Core functions usage

---

```js
/** @jsx createElement */
import { View, Text, Core } from 'weex-nuke';

<NukePlayGround>
  // padding function
  <View style={Core.padding(0,10,15,20)}></View>
  //<View style={{paddingTop:0,paddingRight:10,paddingBottom:15,paddingLeft:20)}></View>
   // margin function
  <View style={Core.margin(0,10,15,20)}></View>
  //<View style={{marginTop:0,marginRight:10,marginBottom:15,marginLeft:20)}></View>
</NukePlayGround>
```

---

```js

import { createElement, Component, render } from 'rax';
class Demo extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View
          style={{ marginBottom: 20, backgroundColor: '#aaaaaa', width: 750, height: 200, ...Core.padding(40, 10) }}>
          <View style={{ backgroundColor: 'white', flex: 1 }}>
            <Text>Core.padding(40, 10) </Text>
          </View>
        </View>
        <View
          style={{
            marginBottom: 20,
            backgroundColor: '#aaaaaa',
            width: 750,
            height: 200,
            ...Core.padding(40, 10, 30, 25)
          }}>
          <View style={{ backgroundColor: 'white', flex: 1 }}>
            <Text>Core.padding(40,10,30,25) </Text>
          </View>
        </View>
      </View>
    );
  }
}

render(<Demo />);
```