This commit is contained in:
cookfront 2017-03-24 22:02:38 +08:00
parent aaf1b2529e
commit a991aea581
27 changed files with 65 additions and 105 deletions

View File

@ -78,15 +78,15 @@ ul, ol {
.page-container { .page-container {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
display: table; display: flex;
width: 100%; width: 100%;
overflow: hidden;
} }
.page-content { .page-content {
box-sizing: border-box; box-sizing: border-box;
margin-left: 220px;
padding: 0 40px; padding: 0 40px;
display: table-cell; flex: 1;
section { section {
> h1, > h1,

View File

@ -23,25 +23,27 @@ export default {
code { code {
font-family: Menlo, Monaco, Consolas, Courier, monospace; font-family: Menlo, Monaco, Consolas, Courier, monospace;
overflow: auto;
white-space: pre-wrap;
} }
.examples { .examples {
width: 320px; width: 320px;
float: right;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0 0; padding: 10px 0 0;
min-height: 200px; min-height: 200px;
max-height: 600px; max-height: 500px;
overflow: auto; overflow: auto;
background-color: #F8F8F8; background-color: #F8F8F8;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
float: right;
} }
.highlight { .highlight {
margin-right: 345px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
border-radius: 4px; border-radius: 4px;
margin-right: 345px;
pre { pre {
margin: 0; margin: 0;

View File

@ -56,10 +56,9 @@ export default {
<style lang="css"> <style lang="css">
.side-nav { .side-nav {
width: 220px; width: 250px;
box-sizing: border-box; box-sizing: border-box;
padding: 40px 0; padding: 40px 0;
display: table-cell;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
li { li {

View File

@ -52,7 +52,7 @@ export default {
} }
</script> </script>
## ActionSheet ## ActionSheet 行动按钮
### 基础用法 ### 基础用法

View File

@ -1,4 +1,4 @@
## Badge ## Badge 徽章
### 基础用法 ### 基础用法

View File

@ -39,6 +39,8 @@
### 禁用状态 ### 禁用状态
在组件上加上`disabled`属性即可,此时按钮不可点击。
:::demo 禁用状态 :::demo 禁用状态
```html ```html
<zan-row> <zan-row>
@ -90,6 +92,8 @@
### loading按钮 ### loading按钮
`loading`状态的按钮。
:::demo loading按钮 :::demo loading按钮
```html ```html
<zan-row> <zan-row>
@ -103,18 +107,6 @@
``` ```
::: :::
### button group
:::demo button group
```html
<div class="button-group">
<zan-button type="primary" size="small">确认付款</zan-button>
<zan-button size="small">确认收货</zan-button>
<zan-button size="small">取消订单</zan-button>
</div>
```
:::
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |

View File

@ -16,7 +16,7 @@ export default {
}; };
</script> </script>
## Cell ## Cell 单元格
### 基础用法 ### 基础用法

View File

@ -35,7 +35,7 @@ export default {
}; };
</script> </script>
## Checkbox组件 ## Checkbox 复选框
### 基础用法 ### 基础用法

View File

@ -23,7 +23,7 @@ export default {
}; };
</script> </script>
## Picker组件 ## Datetime Picker 时间选择
模仿iOS中的`UIPickerView` 模仿iOS中的`UIPickerView`

View File

@ -39,7 +39,7 @@ export default {
}; };
</script> </script>
## Dialog组件 ## Dialog 弹出框
### 基础用法 ### 基础用法

View File

@ -18,7 +18,7 @@ export default {
}; };
</script> </script>
## Field组件 ## Field 输入框
表单中`input``textarea`的输入框。 表单中`input``textarea`的输入框。

View File

@ -12,9 +12,11 @@
} }
</style> </style>
## Icon ## Icon 图标
### 所有Icon ### 基础用法
设置`name`属性为对应的图标名称即可。
:::demo 所有Icon :::demo 所有Icon
```html ```html

View File

@ -17,7 +17,7 @@
} }
</style> </style>
## Loading 加载 ## Loading 加载
### 基础用法 ### 基础用法

View File

@ -35,9 +35,7 @@ export default {
}; };
</script> </script>
## Picker组件 ## Picker 选择器
模仿iOS中的`UIPickerView`
### 基础用法 ### 基础用法

View File

@ -76,7 +76,7 @@ export default {
}; };
</script> </script>
## Popup组件 ## Popup 弹出菜单
### 基础用法 ### 基础用法

View File

@ -10,7 +10,7 @@
</style> </style>
## Progress ## Progress 进度条
### 基础用法 ### 基础用法

View File

@ -23,7 +23,7 @@ export default {
}; };
</script> </script>
## Quantity ## Quantity 数量选择
### 基础用法 ### 基础用法

View File

@ -25,7 +25,7 @@ export default {
}; };
</script> </script>
## Radio组件 ## Radio 单选框
### 基础用法 ### 基础用法

View File

@ -8,7 +8,7 @@ export default {
}; };
</script> </script>
## Search 组件 ## Search 搜索
### 基础用法 ### 基础用法
@ -31,4 +31,4 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| placeholder | `input``placeholder`文案 | `string` | | | | placeholder | `input``placeholder`文案 | `string` | | |

View File

@ -12,7 +12,7 @@
} }
</style> </style>
## Swipe ## Swipe 轮播
### 基础用法 ### 基础用法

View File

@ -36,7 +36,7 @@ export default {
}; };
</script> </script>
## Switch组件 ## Switch 开关
### 基础用法 ### 基础用法

View File

@ -29,7 +29,7 @@ export default {
}; };
</script> </script>
## Tab 组件 ## Tab 标签
### 基础用法 ### 基础用法

View File

@ -8,7 +8,7 @@
} }
</style> </style>
## Tag 组件 ## Tag 标记
### 基础用法 ### 基础用法

View File

@ -63,7 +63,7 @@ export default {
}; };
</script> </script>
## Toast ## Toast 轻提示
### 基础用法 ### 基础用法

View File

@ -12,7 +12,7 @@ export default {
} }
}; };
</script> </script>
## Uploader 组件 ## Uploader 图片上传
### 基础用法 ### 基础用法

View File

@ -26,71 +26,71 @@
"list": [ "list": [
{ {
"path": "/button", "path": "/button",
"title": "Button" "title": "Button 按钮"
}, },
{ {
"path": "/icon", "path": "/icon",
"title": "Icon" "title": "Icon 图标"
}, },
{ {
"path": "/cell", "path": "/cell",
"title": "Cell" "title": "Cell 单元格"
}, },
{ {
"path": "/progress", "path": "/progress",
"title": "Progress" "title": "Progress 进度条"
}, },
{ {
"path": "/panel", "path": "/panel",
"title": "Panel" "title": "Panel 面板"
}, },
{ {
"path": "/card", "path": "/card",
"title": "Card" "title": "Card 图文组件"
}, },
{ {
"path": "/loading", "path": "/loading",
"title": "Loading" "title": "Loading 加载"
}, },
{ {
"path": "/steps", "path": "/steps",
"title": "Steps" "title": "Steps 步骤条"
}, },
{ {
"path": "/tag", "path": "/tag",
"title": "Tag" "title": "Tag 标记"
}, },
{ {
"path": "/badge", "path": "/badge",
"title": "Badge" "title": "Badge 徽章"
}, },
{ {
"path": "/tab", "path": "/tab",
"title": "Tab" "title": "Tab 标签"
}, },
{ {
"path": "/popup", "path": "/popup",
"title": "Popup" "title": "Popup 弹出菜单"
}, },
{ {
"path": "/swipe", "path": "/swipe",
"title": "Swipe" "title": "Swipe 轮播"
}, },
{ {
"path": "/search", "path": "/search",
"title": "Search" "title": "Search 搜索"
}, },
{ {
"path": "/quantity", "path": "/quantity",
"title": "Quantity" "title": "Quantity 数量选择"
}, },
{ {
"path": "/waterfall", "path": "/waterfall",
"title": "Waterfall" "title": "Waterfall 瀑布流"
}, },
{ {
"path": "/image-preview", "path": "/image-preview",
"title": "ImagePreview" "title": "ImagePreview 图片预览"
} }
] ]
}, },
@ -99,23 +99,23 @@
"list": [ "list": [
{ {
"path": "/switch", "path": "/switch",
"title": "Switch" "title": "Switch 开关"
}, },
{ {
"path": "/field", "path": "/field",
"title": "Field" "title": "Field 输入框"
}, },
{ {
"path": "/radio", "path": "/radio",
"title": "Radio" "title": "Radio 单选框"
}, },
{ {
"path": "/checkbox", "path": "/checkbox",
"title": "Checkbox" "title": "Checkbox 复选框"
}, },
{ {
"path": "/uploader", "path": "/uploader",
"title": "Uploader" "title": "Uploader 图片上传"
} }
] ]
}, },
@ -124,23 +124,23 @@
"list": [ "list": [
{ {
"path": "/actionsheet", "path": "/actionsheet",
"title": "ActionSheet" "title": "ActionSheet 行动按钮"
}, },
{ {
"path": "/toast", "path": "/toast",
"title": "Toast" "title": "Toast 轻提示"
}, },
{ {
"path": "/picker", "path": "/picker",
"title": "Picker" "title": "Picker 选择器"
}, },
{ {
"path": "/datetime-picker", "path": "/datetime-picker",
"title": "Datetime Picker" "title": "Datetime Picker 时间选择"
}, },
{ {
"path": "/dialog", "path": "/dialog",
"title": "Dialog" "title": "Dialog 弹出框"
} }
] ]
} }

View File

@ -1,33 +0,0 @@
@define-mixin button-wrap {
display: inline-block;
box-sizing: border-box;
padding-right: 10px;
vertical-align: middle;
&:last-child {
padding-right: 0;
}
.zan-button {
width: 100%;
}
}
@component-namespace zan {
@b button-group {
font-size: 0;
}
@b button-1 {
@mixin button-wrap;
padding-right: 0;
width: 100%;
}
@b button-2 {
@mixin button-wrap;
width: 50%;
}
@b button-3 {
@mixin button-wrap;
width: 33.33%;
}
}