188c88e8eSopenharmony_ci<template lang="jade">
288c88e8eSopenharmony_ci.wrap
388c88e8eSopenharmony_ci    text.text-hi {{hi}}
488c88e8eSopenharmony_ci    text.text-name {{name}}
588c88e8eSopenharmony_ci</template>
688c88e8eSopenharmony_ci
788c88e8eSopenharmony_ci<style lang="cssnext">
888c88e8eSopenharmony_ci    :root {
988c88e8eSopenharmony_ci        --mainColor: red;
1088c88e8eSopenharmony_ci        --subColor: green;
1188c88e8eSopenharmony_ci        --normalFont: {
1288c88e8eSopenharmony_ci            font-size: 26px;
1388c88e8eSopenharmony_ci        };
1488c88e8eSopenharmony_ci    }
1588c88e8eSopenharmony_ci
1688c88e8eSopenharmony_ci    .wrap {
1788c88e8eSopenharmony_ci        flex-direction: row;
1888c88e8eSopenharmony_ci    }
1988c88e8eSopenharmony_ci
2088c88e8eSopenharmony_ci    .text-hi {
2188c88e8eSopenharmony_ci        color: var(--mainColor);
2288c88e8eSopenharmony_ci        @apply --normalFont;
2388c88e8eSopenharmony_ci    }
2488c88e8eSopenharmony_ci
2588c88e8eSopenharmony_ci    .text-name {
2688c88e8eSopenharmony_ci        color: var(--subColor);
2788c88e8eSopenharmony_ci        @apply --normalFont;
2888c88e8eSopenharmony_ci    }
2988c88e8eSopenharmony_ci</style>
3088c88e8eSopenharmony_ci
3188c88e8eSopenharmony_ci<script lang="coffee">
3288c88e8eSopenharmony_cimodal = require '@weex-module/modal'
3388c88e8eSopenharmony_ci
3488c88e8eSopenharmony_cimodule.exports = 
3588c88e8eSopenharmony_ci    ready: () -> 
3688c88e8eSopenharmony_ci        modal.toast({'message': 'ready'})
3788c88e8eSopenharmony_ci
3888c88e8eSopenharmony_ci    data: () ->
3988c88e8eSopenharmony_ci        return {
4088c88e8eSopenharmony_ci            hi: 'Hello',
4188c88e8eSopenharmony_ci            name: 'Weex'
4288c88e8eSopenharmony_ci        }
4388c88e8eSopenharmony_ci</script>