diff --git a/src/app.js b/src/app.js
index cce1e41e1..1874d634b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,7 +8,7 @@ class App extends Component {
     pages: [
       'pages/index/index',
       'pages/action/toast/index',
-      // 'pages/action/modal/index',
+      'pages/action/modal/index',
       'pages/action/progress/index',
       'pages/action/action-sheet/index',
       'pages/action/activity-indicator/index',
diff --git a/src/components/action-sheet/body/index.js b/src/components/action-sheet/body/index.js
new file mode 100644
index 000000000..72ae15e28
--- /dev/null
+++ b/src/components/action-sheet/body/index.js
@@ -0,0 +1,15 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import AtActionSheetItem from './item/index.js'
+
+import './index.scss'
+
+export default class AtActionSheetBody extends Taro.Component {
+  static Item = AtActionSheetItem
+
+  render () {
+    const { children } = this.props
+    return <View className='at-action-sheet-body'>{children}</View>
+  }
+}
diff --git a/src/components/action-sheet/body/index.scss b/src/components/action-sheet/body/index.scss
new file mode 100644
index 000000000..14b458d60
--- /dev/null
+++ b/src/components/action-sheet/body/index.scss
@@ -0,0 +1,3 @@
+.at-action-sheet-body {
+  text-align: center;
+}
diff --git a/src/components/action-sheet/body/item/index.js b/src/components/action-sheet/body/item/index.js
new file mode 100644
index 000000000..8c6aa213a
--- /dev/null
+++ b/src/components/action-sheet/body/item/index.js
@@ -0,0 +1,24 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import _isFunction from 'lodash/isFunction'
+
+import './index.scss'
+
+export default class AtActionSheetItem extends Taro.Component {
+  handleClick () {
+    const { onClick } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+  }
+
+  render () {
+    const { children } = this.props
+    return (
+      <View className='at-action-sheet-item' onClick={this.handleClick}>
+        {children}
+      </View>
+    )
+  }
+}
diff --git a/src/components/action-sheet/body/item/index.scss b/src/components/action-sheet/body/item/index.scss
new file mode 100644
index 000000000..2d4350210
--- /dev/null
+++ b/src/components/action-sheet/body/item/index.scss
@@ -0,0 +1,11 @@
+@import "../../../../style/mixins/index.scss";
+@import "../../../../style/theme/default.scss";
+
+.at-action-sheet-item {
+  font-size: 36px;
+  padding: 25px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
+  }
+}
diff --git a/src/components/action-sheet/footer/index.js b/src/components/action-sheet/footer/index.js
new file mode 100644
index 000000000..0c9cc60c1
--- /dev/null
+++ b/src/components/action-sheet/footer/index.js
@@ -0,0 +1,25 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import _isFunction from 'lodash/isFunction'
+
+import './index.scss'
+
+export default class AtActionSheetFooter extends Taro.Component {
+  handleClick = () => {
+    const { onClick, $$close } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+    $$close()
+  }
+
+  render () {
+    const { children } = this.props
+    return (
+      <View className='at-action-sheet-footer' onClick={this.handleClick}>
+        {children}
+      </View>
+    )
+  }
+}
diff --git a/src/components/action-sheet/footer/index.scss b/src/components/action-sheet/footer/index.scss
new file mode 100644
index 000000000..998c6def0
--- /dev/null
+++ b/src/components/action-sheet/footer/index.scss
@@ -0,0 +1,5 @@
+.at-action-sheet-footer {
+  font-size: 36px;
+  padding: 25px 0;
+  border-top: 12px solid rgba($color: #cdcdd1, $alpha: 0.3);
+}
diff --git a/src/components/action-sheet/header/index.js b/src/components/action-sheet/header/index.js
new file mode 100644
index 000000000..111993d98
--- /dev/null
+++ b/src/components/action-sheet/header/index.js
@@ -0,0 +1,11 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class AtActionSheetHeader extends Taro.Component {
+  render () {
+    const { children } = this.props
+    return <View className='at-action-sheet-header'>{children}</View>
+  }
+}
diff --git a/src/components/action-sheet/header/index.scss b/src/components/action-sheet/header/index.scss
new file mode 100644
index 000000000..855ca4153
--- /dev/null
+++ b/src/components/action-sheet/header/index.scss
@@ -0,0 +1,9 @@
+@import "../../../style/mixins/index.scss";
+@import "../../../style/theme/default.scss";
+
+.at-action-sheet-header {
+  font-size: 28px;
+  padding: 25px 0;
+  color: #888;
+  border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
+}
diff --git a/src/components/action-sheet/index.js b/src/components/action-sheet/index.js
index 13ec256cc..21679677c 100644
--- a/src/components/action-sheet/index.js
+++ b/src/components/action-sheet/index.js
@@ -1,28 +1,80 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
+import AtActionSheetBody from './body'
+import AtActionSheetHeader from './header'
+import AtActionSheetFooter from './footer'
+
 import './index.scss'
 
-export default class ActionSheet extends Taro.Component {
+export default class AtActionSheet extends Taro.Component {
+  static Body = AtActionSheetBody
+  static Header = AtActionSheetHeader
+  static Footer = AtActionSheetFooter
+
+  constructor (props) {
+    super(...arguments)
+    const { isOpened } = props
+    this.state = {
+      isOpened
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { isOpened } = nextProps
+    if (isOpened !== this.state.isOpened) {
+      this.setState({
+        isOpened
+      })
+    }
+  }
+
+  _close () {
+    this.setState({
+      isOpened: false
+    })
+  }
+
+  _open () {
+    this.setState({
+      isOpened: true
+    })
+  }
+
+  handleClickOverlay = () => {
+    this._close()
+  }
+
   render () {
-    return (
+    const { children } = this.props
+    const { isOpened } = this.state
+
+    console.log(children)
+
+    if (children) {
+      const index = children.findIndex(
+        item => item.name === 'AtActionSheetFooter'
+      )
+
+      if (index === -1) return
+
+      children[index].props = Object.assign(
+        {
+          $$close: this._close.bind(this),
+          $$open: this._open.bind(this)
+        },
+        children[index].props
+      )
+    }
+
+    return isOpened ? (
       <View className='at-action-sheet'>
-        <View className='at-action-sheet__overlay' />
-        <View className='at-action-sheet__container'>
-          <View className='at-action-sheet__container-header'>
-            <View>清除位置信息后， 别人将不能查看到你</View>
-            <View>这里最多显示两行</View>
-          </View>
-          <View className='at-action-sheet__container-body body__list'>
-            <View className='body__list-item'>清除位置信息并退出 </View>
-            <View className='body__list-item'>清除位置信息并退出</View>
-            <View className='body__list-item'>清除位置信息并退出</View>
-          </View>
-          <View className='at-action-sheet__container-footer'>
-            <View>取消</View>
-          </View>
-        </View>
+        <View
+          onClick={this.handleClickOverlay}
+          className='at-action-sheet__overlay'
+        />
+        <View className='at-action-sheet__container'>{children}</View>
       </View>
-    )
+    ) : null
   }
 }
diff --git a/src/components/action-sheet/index.scss b/src/components/action-sheet/index.scss
index cf8a2eb8d..90a7cfbf6 100644
--- a/src/components/action-sheet/index.scss
+++ b/src/components/action-sheet/index.scss
@@ -19,31 +19,5 @@
     text-align: center;
     position: absolute;
     background-color: white;
-
-    &-header {
-      font-size: 28px;
-      padding: 25px 0;
-      color: #888;
-      border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
-    }
-
-    &-footer {
-      font-size: 36px;
-      padding: 25px 0;
-      border-top: 12px solid rgba($color: #cdcdd1, $alpha: 0.3);
-    }
-  }
-}
-
-.body__list {
-  text-align: center;
-
-  &-item {
-    font-size: 36px;
-    padding: 25px 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
-    }
   }
 }
diff --git a/src/components/modal/action/button.js b/src/components/modal/action/button/index.js
similarity index 50%
rename from src/components/modal/action/button.js
rename to src/components/modal/action/button/index.js
index 849fb7866..12b9f11dd 100644
--- a/src/components/modal/action/button.js
+++ b/src/components/modal/action/button/index.js
@@ -5,20 +5,19 @@ import _isFunction from 'lodash/isFunction'
 
 import './index.scss'
 
-export default class ModalButton extends Taro.Component {
-  constructor() {
-    super(...arguments)
-  }
-
+export default class AtModalButton extends Taro.Component {
   handleClick = () => {
-    const { onClick } = this.props
-    _isFunction(onClick) && onClick()
+    const { onClick, $$close } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+    $$close()
   }
 
-  render() {
+  render () {
     const { children } = this.props
     return (
-      <Button className='at-modal-action__button' onClick={this.handleClick}>
+      <Button className='at-modal-action-button' onClick={this.handleClick}>
         {children}
       </Button>
     )
diff --git a/src/components/modal/action/button/index.scss b/src/components/modal/action/button/index.scss
new file mode 100644
index 000000000..ce82e56ce
--- /dev/null
+++ b/src/components/modal/action/button/index.scss
@@ -0,0 +1,11 @@
+.at-modal-action-button {
+  outline: 0;
+  flex: auto;
+  border: none;
+  font-size: 28px;
+  background-color: white;
+
+  &:not(:first-child) {
+    border-left: 2px solid #e5e5e5;
+  }
+}
diff --git a/src/components/modal/action/index.js b/src/components/modal/action/index.js
index a7e1a15e4..ca5b4f8a8 100644
--- a/src/components/modal/action/index.js
+++ b/src/components/modal/action/index.js
@@ -1,15 +1,22 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
-import ModalButton from './button.js'
+import AtModalButton from './button/index.js'
 
 import './index.scss'
 
-export default class ModalFooter extends Taro.Component {
-  static Button = ModalButton
+export default class AtModalFooter extends Taro.Component {
+  static Button = AtModalButton
 
   render () {
-    const { children } = this.props
+    let { children } = this.props
+    const { $$close } = this.props
+
+    children = children.map(item => {
+      item.props.$$close = $$close
+      return item
+    })
+
     return (
       <View className='at-modal-footer'>
         <View className='at-modal-footer__action'>{children}</View>
diff --git a/src/components/modal/action/index.scss b/src/components/modal/action/index.scss
index 6fe6c9aa1..b560bc265 100644
--- a/src/components/modal/action/index.scss
+++ b/src/components/modal/action/index.scss
@@ -1,17 +1,8 @@
 .at-modal-footer {
   border-top: 2px solid #e5e5e5;
+
   &__action {
     display: flex;
   }
 }
 
-.at-modal-action__button {
-  outline: 0;
-  flex: auto;
-  border: none;
-  font-size: 28px;
-  background-color: white;
-  &:not(:first-child) {
-    border-left: 2px solid #e5e5e5;
-  }
-}
\ No newline at end of file
diff --git a/src/components/modal/content/index.js b/src/components/modal/content/index.js
index 9b361c679..f19722382 100644
--- a/src/components/modal/content/index.js
+++ b/src/components/modal/content/index.js
@@ -3,7 +3,7 @@ import { View } from '@tarojs/components'
 
 import './index.scss'
 
-export default class ModalFooter extends Taro.Component {
+export default class AtModalContent extends Taro.Component {
   render () {
     const { children } = this.props
     return <View className='at-modal-body'>{children}</View>
diff --git a/src/components/modal/header/index.js b/src/components/modal/header/index.js
index 4e36db4fe..fa77ece5b 100644
--- a/src/components/modal/header/index.js
+++ b/src/components/modal/header/index.js
@@ -3,7 +3,7 @@ import { View } from '@tarojs/components'
 
 import './index.scss'
 
-export default class ModalHeader extends Taro.Component {
+export default class AtModalHeader extends Taro.Component {
   render () {
     const { children } = this.props
     return (
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index 7db586531..c8aa904fc 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -1,43 +1,43 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
-import ModalHeader from './header/index'
-import ModalAction from './action/index'
-import ModalContent from './content/index'
+import AtModalHeader from './header'
+import AtModalAction from './action'
+import AtModalContent from './content'
 
 import './index.scss'
 
-export default class Modal extends Taro.Component {
+export default class AtModal extends Taro.Component {
+  static Content = AtModalContent
+  static Header = AtModalHeader
+  static Action = AtModalAction
+
   constructor (props) {
     super(...arguments)
-    const { open } = props
+    const { isOpened } = props
     this.state = {
-      open
+      isOpened
     }
   }
 
-  static Content = ModalContent
-  static Header = ModalHeader
-  static Action = ModalAction
-
   componentWillReceiveProps (nextProps) {
-    const { open } = nextProps
-    if (open !== this.state.open) {
+    const { isOpened } = nextProps
+    if (isOpened !== this.state.isOpened) {
       this.setState({
-        open
+        isOpened
       })
     }
   }
 
   _close () {
     this.setState({
-      open: false
+      isOpened: false
     })
   }
 
-  _open () {
+  _isOpened () {
     this.setState({
-      open: true
+      isOpened: true
     })
   }
 
@@ -46,9 +46,23 @@ export default class Modal extends Taro.Component {
   }
 
   render () {
-    const { open } = this.state
+    const { isOpened } = this.state
     const { children } = this.props
-    return open ? (
+
+    if (children) {
+      const index = children.findIndex(item => item.name === 'AtModalFooter')
+
+      if (index === -1) return
+
+      children[index].props = Object.assign(
+        {
+          $$close: this._close.bind(this)
+        },
+        children[index].props
+      )
+    }
+
+    return isOpened ? (
       <View className='at-modal'>
         <View className='at-modal__overlay' onClick={this.handleClickOverlay} />
         <View className='at-modal__container'>{children}</View>
@@ -56,14 +70,3 @@ export default class Modal extends Taro.Component {
     ) : null
   }
 }
-
-Modal.defaultProps = {
-  buttons: [
-    {
-      name: '取消'
-    },
-    {
-      name: '确认'
-    }
-  ]
-}
diff --git a/src/components/modal/index.scss b/src/components/modal/index.scss
index 1b8bd7189..43b42877e 100644
--- a/src/components/modal/index.scss
+++ b/src/components/modal/index.scss
@@ -1,4 +1,3 @@
-/* postcss-pxtransform disable */
 @import "../../style/mixins/index.scss";
 @import "../../style/theme/default.scss";
 
@@ -16,8 +15,8 @@
   &__container {
     @include absolute-center();
 
-    width: 270px;
-    background-color: white;
+    width: 540px;
+    background-color: $color-white;
   }
 
   .at-footer {
diff --git a/src/pages/action/action-sheet/index.js b/src/pages/action/action-sheet/index.js
index 343033a39..9789dd046 100644
--- a/src/pages/action/action-sheet/index.js
+++ b/src/pages/action/action-sheet/index.js
@@ -1,7 +1,8 @@
+/* eslint taro/custom-component-children: 0 */
 import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Button } from '@tarojs/components'
 
-import ActionSheet from '../../../components/action-sheet/index'
+import ActionSheet from '../../../components/action-sheet'
 
 import './index.scss'
 
@@ -12,19 +13,41 @@ export default class ActionSheetPage extends Taro.Component {
 
   constructor () {
     super(...arguments)
-    this.state = {}
+    this.state = {
+      isOpened: true
+    }
+  }
+
+  handleClick = e => {
+    const state = Object.assign({ isOpened: true }, e.currentTarget.dataset)
+    this.setState(state)
   }
 
   render () {
+    const { isOpened } = this.state
     return (
       <View className='action-sheet__page'>
         <View className='example'>
           <View className='example__header'>
             <Text className='example__header-title'>真实案例</Text>
           </View>
-          <View className='example__body' />
+          <View className='example__body'>
+            <Button onClick={this.handleClick}>打开ActionSheet</Button>
+          </View>
         </View>
-        <ActionSheet />
+        <ActionSheet isOpened={isOpened}>
+          <ActionSheet.Header>
+            <Text>Title</Text>
+          </ActionSheet.Header>
+          <ActionSheet.Body>
+            <ActionSheet.Body.Item>这是啥??</ActionSheet.Body.Item>
+            <ActionSheet.Body.Item>这是啥</ActionSheet.Body.Item>
+            <ActionSheet.Body.Item>这是啥</ActionSheet.Body.Item>
+          </ActionSheet.Body>
+          <ActionSheet.Footer>
+            <Text>取消</Text>
+          </ActionSheet.Footer>
+        </ActionSheet>
       </View>
     )
   }
diff --git a/src/pages/action/action-sheet/index.scss b/src/pages/action/action-sheet/index.scss
new file mode 100644
index 000000000..05e9cf360
--- /dev/null
+++ b/src/pages/action/action-sheet/index.scss
@@ -0,0 +1 @@
+// action-sheet
diff --git a/src/pages/action/modal/index.js b/src/pages/action/modal/index.js
index c9e91f80e..522fe505d 100644
--- a/src/pages/action/modal/index.js
+++ b/src/pages/action/modal/index.js
@@ -2,7 +2,7 @@
 import Taro from '@tarojs/taro'
 import { View, Button, Text } from '@tarojs/components'
 
-import Modal from '../../../components/modal/index'
+import Modal from '../../../components/modal'
 
 import './index.scss'
 
@@ -14,17 +14,17 @@ export default class ModalPage extends Taro.Component {
   constructor () {
     super(...arguments)
     this.state = {
-      open: true
+      isOpened: false
     }
   }
 
   handleClick = e => {
-    const state = Object.assign({ isOpen: true }, e.currentTarget.dataset)
+    const state = Object.assign({ isOpened: true }, e.currentTarget.dataset)
     this.setState(state)
   }
 
   render () {
-    const { open } = this.state
+    const { isOpened } = this.state
     return (
       <View className='action-sheet__page'>
         <View className='example'>
@@ -35,7 +35,7 @@ export default class ModalPage extends Taro.Component {
             <Button onClick={this.handleClick}>打开Modal</Button>
           </View>
         </View>
-        <Modal open={open}>
+        <Modal isOpened={isOpened}>
           <Modal.Header>
             <Text>这是标题知道吧</Text>
           </Modal.Header>
@@ -43,9 +43,7 @@ export default class ModalPage extends Taro.Component {
             <View>这是内容知道吧</View>
           </Modal.Content>
           <Modal.Action>
-            <Modal.Action.Button onClick={console.log.bind(this, 1)}>
-              取消
-            </Modal.Action.Button>
+            <Modal.Action.Button>取消</Modal.Action.Button>
             <Modal.Action.Button>确认</Modal.Action.Button>
           </Modal.Action>
         </Modal>
diff --git a/src/pages/action/modal/index.scss b/src/pages/action/modal/index.scss
new file mode 100644
index 000000000..d839ee7b1
--- /dev/null
+++ b/src/pages/action/modal/index.scss
@@ -0,0 +1 @@
+// Modal Scss
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 92ac8fb49..816cb324d 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -19,9 +19,10 @@
 .group-item {
   padding: 0 30px;
   margin: 20px 0;
-  background-color: #ffffff;
+  background-color: #fff;
   border-radius: 4px;
   overflow: hidden;
+
   &:first-child {
     margin-top: 0;
   }
@@ -32,6 +33,7 @@
   display: flex;
   align-items: center;
   transition: opacity 0.3s;
+
   &-title {
     opacity: 0.5;
   }
@@ -39,11 +41,13 @@
 
 .group-list {
   font-size: 28px;
+
   .list-component {
     padding: 20px 0;
     position: relative;
     align-items: center;
-    &:before {
+
+    &::before {
       content: " ";
       position: absolute;
       left: 0;
@@ -53,6 +57,7 @@
       border-top: 1px solid #d8d8d8;
       color: #d8d8d8;
     }
+
     &:first-child::before {
       display: none;
     }
@@ -66,7 +71,7 @@
       height: 18px;
       width: 18px;
       border-width: 2px 2px 0 0;
-      border-color: #888888;
+      border-color: #888;
       border-style: solid;
       transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) translate(-50%);
       position: absolute;
diff --git a/src/style/mixins/index.scss b/src/style/mixins/index.scss
index df0610732..07903e3a9 100644
--- a/src/style/mixins/index.scss
+++ b/src/style/mixins/index.scss
@@ -3,9 +3,9 @@
  */
 
 /* library */
-@import './lib/absolute-center';
-@import './lib/clearfix';
-@import './lib/ellipsis';
-@import './lib/overlay';
-@import './lib/shade';
-@import './lib/tint';
+@import './libs/absolute-center';
+@import './libs/clearfix';
+@import './libs/ellipsis';
+@import './libs/overlay';
+@import './libs/shade';
+@import './libs/tint';