Refactor dev build (#1248)

* feat: add axml transform script

* feat: add axml transform script

* feat: 条件编译

* feat: 注释全部删掉

* feat: axml编译逻辑抽插件

* feat: axml编译逻辑抽插件

* feat: axml编译逻辑抽插件

* feat: axml编译逻辑抽插件

* feat: axml编译逻辑抽插件

* feat: nextCompiled拷贝compiled提交

* feat: nextCompiled拷贝compiled提交

* feat: nextCompiled拷贝compiled提交

* feat: 支付宝产物输出

* feat: 微信编译配置调整

* feat: 调整源代码文件目录

* feat: 调整源代码文件目录

* feat: 调整源代码文件目录

* feat: 调整demo代码文件目录

* feat: 调整demo代码文件目录

* feat: 调整demo代码文件目录

* feat: 调整demo代码文件目录

* feat: dev编译目录调整

* feat: dev编译目录调整

* feat: 编译代码

* feat: 编译代码

* feat: 删除demo文件夹中axmltsx

* feat: 删除demo文件夹中axmltsx

* feat: 编译微信代码

* feat: 条件编译走gulp

* feat: ActionSheet、Avatar、Badge编译

* feat: axml 测试用例

* feat: demo目录条件编译

* feat: button、calendar条件编译调整

* feat: checklist、checkbox条件编译调整

* feat: form组件条件编译调整

* feat: 剩余组件组件条件编译调整

* feat: 剩余组件组件条件编译调整

* feat: 剩余组件组件条件编译调整

* fix: input、textarea视为基础组件

* fix: axml 编译class问题修复

* fix: axml 编译class问题修复

* fix: classname问题修复

* feat: axml-transverter单独发包

* feat: 去掉以前的源码和demo代码

* feat: badge微信适配text属性

* feat: a:key改key

* feat: 支持自定义属性编译

* feat: template标签上写a:if会导致编译时丢弃掉

* feat: picker的demo问题修复

* fix: 微信修复stepper受控展示时的初始化问题

* feat: 微信事件编译调整

* feat: lodash依赖去除,兼容适配微信

* feat: popover微信适配

* feat: 修改依赖axml-transverter

* feat: build编译脚本完善

* feat: build编译脚本完善

* fix: 修复slot属性dash形式无法被构建问题

* fix: 修复slot属性dash形式无法被构建问题

* feat: 去掉srcBack文件夹,将tsxml相关的src文件全部删除
This commit is contained in:
homi 2024-07-30 19:00:12 +08:00 committed by GitHub
parent e73d228996
commit 71d4e2b66f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
715 changed files with 18956 additions and 20017 deletions

3
.gitignore vendored
View File

@ -37,4 +37,7 @@ project.private.config.json
compiled/wechat/miniprogram_npm
compiled/wechat/node_modules
compiled/wechat/yarn.lock
compiledBackup/wechat/miniprogram_npm
compiledBackup/wechat/node_modules
compiledBackup/wechat/yarn.lock
knowledge.json

View File

@ -1,48 +1,54 @@
<ant-container title="基础用法">
<ant-button
onTap="handleOpenBasic"
inline="{{ true }}"
inline="{{true}}"
size="large"
data-index="1">
data-index="1"
>
基础用法
</ant-button>
</ant-container>
<ant-container title="选项状态">
<ant-button
onTap="handleOpenBasic"
inline="{{ true }}"
inline="{{true}}"
size="large"
data-index="2">
data-index="2"
>
危险状态&禁用状态
</ant-button>
</ant-container>
<ant-container title="带注释及icon">
<ant-button
onTap="handleOpenBasic"
inline="{{ true }}"
inline="{{true}}"
size="large"
data-index="3">
data-index="3"
>
带注释及icon
</ant-button>
</ant-container>
<ant-action-sheet
title="请选择你要进行的操作"
visible="{{ visible1 }}"
actions="{{ actions1 }}"
visible="{{visible1}}"
actions="{{actions1}}"
data-index="1"
onAction="handleAction"
onClose="handleCloseBasic" />
onClose="handleCloseBasic"
></ant-action-sheet>
<ant-action-sheet
title="请选择你要进行的操作"
visible="{{ visible2 }}"
actions="{{ actions2 }}"
visible="{{visible2}}"
actions="{{actions2}}"
data-index="2"
onAction="handleAction"
onClose="handleCloseBasic" />
onClose="handleCloseBasic"
></ant-action-sheet>
<ant-action-sheet
title="请选择你要进行的操作"
visible="{{ visible3 }}"
actions="{{ actions3 }}"
visible="{{visible3}}"
actions="{{actions3}}"
data-index="3"
onAction="handleAction"
onClose="handleCloseBasic" />
onClose="handleCloseBasic"
></ant-action-sheet>

View File

@ -1,45 +1,47 @@
<ant-container title="基础用法-四种尺寸">
<block
a:for="{{ images }}"
a:for-index="index"
a:for-item="item">
<ant-avatar
src="{{ item }}"
className="avatar" />
</block>
</ant-container>
<ant-container title="占位头像">
<ant-avatar size="{{ item }}" />
</ant-container>
<ant-container title="不同大小">
<block
a:for="{{ sizes }}"
a:for="{{images}}"
a:for-index="index"
a:for-item="item"
a:key="{{ item }}">
>
<ant-avatar
size="{{ item }}"
src="{{ images[0] }}"
className="avatar" />
src="{{item}}"
className="avatar"
></ant-avatar>
</block>
</ant-container>
<ant-container title="占位头像">
<ant-avatar size="{{item}}"></ant-avatar>
</ant-container>
<ant-container title="不同大小">
<block
a:for="{{sizes}}"
a:for-index="index"
a:for-item="item"
>
<ant-avatar
size="{{item}}"
src="{{images[0]}}"
className="avatar"
></ant-avatar>
</block>
</ant-container>
<ant-container
title="配合列表使用"
className="container">
className="container"
>
<ant-list-item brief="Deserunt dolor ea eaque eos">
Novalee Spicer
<ant-avatar
slot="image"
src="{{ images[0] }}" />
src="{{images[0]}}"
></ant-avatar>
</ant-list-item>
</ant-container>
<ant-container title="自定义">
<ant-avatar
size="{{ item }}"
src="{{ images[0] }}"
className="avatar-custom" />
</ant-container>
size="{{item}}"
src="{{images[0]}}"
className="avatar-custom"
></ant-avatar>
</ant-container>

View File

@ -2,150 +2,166 @@
<view class="badge-list">
<ant-badge
type="dot"
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="text"
text="新"
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="number"
text="{{ 2 }}"
position="top-right">
<view class="box" />
text="{{2}}"
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="number"
text="{{ 100 }}"
position="top-right">
<view class="box" />
text="{{100}}"
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="bubble"
text="new"
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
</view>
</ant-container>
<ant-container title="带边框">
<view class="badge-list">
<ant-badge
type="dot"
stroke
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="text"
text="新"
stroke
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="number"
text="{{ 1 }}"
text="{{1}}"
stroke
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="number"
text="{{ 100 }}"
text="{{100}}"
stroke
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="bubble"
text="new"
stroke
position="top-right">
<view class="box" />
position="top-right"
>
<view class="box"></view>
</ant-badge>
</view>
</ant-container>
<ant-container title="自定义背景和位置">
<view class="badge-list">
<ant-badge
type="number"
text="{{ 1 }}"
position="top-left">
<view class="box" />
text="{{1}}"
position="top-left"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="bubble"
text="1"
position="bottom-right">
<view class="box" />
position="bottom-right"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="number"
text="{{ 100 }}"
text="{{100}}"
stroke
bgColor="#1677FF">
<view class="box" />
bgColor="#1677FF"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="text"
text="new"
bgColor="#FF9F18"
position="top-center">
<view class="box" />
position="top-center"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="bubble"
text="new"
stroke
bgColor="#34B368">
<view class="box" />
bgColor="#34B368"
>
<view class="box"></view>
</ant-badge>
</view>
</ant-container>
<ant-container title="设置偏移">
<view class="badge-list">
<ant-badge
type="text"
text="1"
offsetX="-20px"
offsetY="0px">
<view class="box" />
offsetY="0px"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="text"
text="1"
position="bottom-right"
offsetX="-20px"
offsetY="-14px">
<view class="box" />
offsetY="-14px"
>
<view class="box"></view>
</ant-badge>
<ant-badge
type="bubble"
text="new"
position="top-right"
offsetX="2px"
offsetY="-8px">
<view class="box" />
offsetY="-8px"
>
<view class="box"></view>
</ant-badge>
</view>
</ant-container>
<ant-container title="自定义内容">
<view class="badge-list">
<ant-badge
type="text"
position="top-right">
position="top-right"
>
<ant-icon
type="GlobalOutline"
slot="text" />
<view class="box" />
slot="text"
></ant-icon>
<view class="box"></view>
</ant-badge>
</view>
</ant-container>
</ant-container>

View File

@ -1,115 +1,121 @@
<ant-container
title="按钮类型"
className="list">
className="list"
>
<ant-button
type="primary"
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
onTap="handleTap">
onTap="handleTap"
>
次要按钮
</ant-button>
<ant-button
type="text"
onTap="handleTap">
onTap="handleTap"
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="带辅助文案按钮"
className="list">
className="list"
>
<ant-button
type="primary"
subText="副标题"
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
subText="副标题"
onTap="handleTap">
onTap="handleTap"
>
次要按钮
</ant-button>
<ant-button
type="text"
subText="副标题"
onTap="handleTap">
onTap="handleTap"
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="禁用"
className="list">
className="list"
>
<ant-button
type="primary"
disabled>
disabled
>
主要按钮
</ant-button>
<ant-button
type="default"
disabled>
disabled
>
次要按钮
</ant-button>
<ant-button
type="text"
disabled>
disabled
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="加载状态"
className="list">
className="list"
>
<ant-button
type="primary"
loading>
loading
>
主要按钮
</ant-button>
<ant-button
type="default"
loading>
loading
>
次要按钮
</ant-button>
<ant-button
type="text"
loading>
loading
>
文本
</ant-button>
</ant-container>
<ant-container
title="危险"
className="list">
className="list"
>
<ant-button
type="primary"
danger
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
danger
onTap="handleTap">
onTap="handleTap"
>
次要按钮
</ant-button>
<ant-button
type="text"
danger
onTap="handleTap">
onTap="handleTap"
>
文本按钮
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,11 +1,13 @@
<ant-container
title="自定义大小"
className="list">
className="list"
>
<ant-button
type="primary"
icon="SmileOutline"
onTap="handleTap"
className="btn">
className="btn"
>
主要按钮
</ant-button>
<ant-button
@ -13,7 +15,8 @@
onTap="handleTap"
icon="SmileOutline"
className="btn"
inline>
inline
>
主要按钮
</ant-button>
<ant-button
@ -22,20 +25,22 @@
icon="ForbidFill"
className="btn"
inline
danger>
danger
>
主要按钮
</ant-button>
</ant-container>
<ant-container
title="round"
className="list">
className="list"
>
<ant-button
type="primary"
icon="SearchOutline"
onTap="handleTap"
inline
className="round">
className="round"
>
主要按钮
</ant-button>
<ant-button
@ -43,36 +48,41 @@
onTap="handleTap"
inline
danger
className="round">
className="round"
>
主要按钮
</ant-button>
</ant-container>
<ant-container
title="circle"
className="list">
className="list"
>
<ant-button
type="primary"
icon="SearchOutline"
onTap="handleTap"
inline
className="circle" />
className="circle"
></ant-button>
<ant-button
icon="SearchOutline"
onTap="handleTap"
inline
className="circle" />
className="circle"
></ant-button>
<ant-button
type="primary"
onTap="handleTap"
inline
className="circle">
className="circle"
>
A
</ant-button>
<ant-button
onTap="handleTap"
inline
className="circle">
className="circle"
>
A
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,35 +1,41 @@
<ant-container title="icon">
<ant-button
type="primary"
icon="SmileOutline">
icon="SmileOutline"
>
Icon
</ant-button>
<ant-button
type="default"
icon="SmileOutline">
icon="SmileOutline"
>
Icon
</ant-button>
<ant-button
type="text"
icon="SmileOutline">
icon="SmileOutline"
>
Icon
</ant-button>
<ant-button
type="primary"
danger
icon="ForbidFill">
icon="ForbidFill"
>
Icon
</ant-button>
<ant-button
type="default"
danger
icon="ForbidFill">
icon="ForbidFill"
>
Icon
</ant-button>
<ant-button
type="text"
danger
icon="ForbidFill">
icon="ForbidFill"
>
Icon
</ant-button>
</ant-container>
@ -38,21 +44,24 @@
type="primary"
icon="SmileOutline"
inline
size="large">
size="large"
>
Icon
</ant-button>
<ant-button
type="primary"
icon="SmileOutline"
inline
size="medium">
size="medium"
>
Icon
</ant-button>
<ant-button
type="primary"
icon="SmileOutline"
inline
size="small">
size="small"
>
Icon
</ant-button>
</ant-container>
@ -62,7 +71,8 @@
icon="ForbidFill"
inline
danger
size="large">
size="large"
>
Icon
</ant-button>
<ant-button
@ -70,7 +80,8 @@
icon="ForbidFill"
inline
danger
size="medium">
size="medium"
>
Icon
</ant-button>
<ant-button
@ -78,7 +89,8 @@
icon="ForbidFill"
inline
danger
size="small">
size="small"
>
Icon
</ant-button>
</ant-container>
@ -88,7 +100,8 @@
icon="SmileOutline"
onTap="handleTap"
inline
loading>
loading
>
loading
</ant-button>
<ant-button
@ -97,14 +110,16 @@
onTap="handleTap"
inline
danger
loading>
loading
>
loading
</ant-button>
<ant-button
type="primary"
icon="SmileOutline"
onTap="handleTap"
loading>
loading
>
loading
</ant-button>
</ant-container>
@ -114,7 +129,8 @@
icon="SmileOutline"
onTap="handleTap"
inline
disabled>
disabled
>
disabled
</ant-button>
<ant-button
@ -123,14 +139,16 @@
onTap="handleTap"
inline
danger
disabled>
disabled
>
disabled
</ant-button>
<ant-button
type="primary"
icon="SmileOutline"
onTap="handleTap"
disabled>
disabled
>
disabled
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,116 +1,136 @@
<ant-container
title="按钮类型"
className="list">
className="list"
>
<ant-button
type="primary"
inline
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
inline
onTap="handleTap">
onTap="handleTap"
>
次要按钮
</ant-button>
<ant-button
type="text"
inline
onTap="handleTap">
onTap="handleTap"
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="按钮尺寸"
className="list">
className="list"
>
<ant-button
type="primary"
inline
size="large"
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="primary"
inline
size="medium"
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="primary"
inline
size="small"
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
</ant-container>
<ant-container
title="危险"
className="list">
className="list"
>
<ant-button
type="primary"
inline
danger
onTap="handleTap">
onTap="handleTap"
>
主要按钮
</ant-button>
<ant-button
type="default"
inline
danger
onTap="handleTap">
onTap="handleTap"
>
次要按钮
</ant-button>
<ant-button
type="text"
inline
danger
onTap="handleTap">
onTap="handleTap"
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="禁用"
className="list">
className="list"
>
<ant-button
type="primary"
inline
disabled>
disabled
>
主要按钮
</ant-button>
<ant-button
type="default"
inline
disabled>
disabled
>
次要按钮
</ant-button>
<ant-button
type="text"
inline
disabled>
disabled
>
文本按钮
</ant-button>
</ant-container>
<ant-container
title="加载状态"
className="list">
className="list"
>
<ant-button
type="primary"
inline
loading>
loading
>
主要按钮
</ant-button>
<ant-button
type="default"
inline
loading>
loading
>
次要按钮
</ant-button>
<ant-button
type="text"
inline
loading>
loading
>
文本
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,4 +1,3 @@
<view
class="cn-day {{ festival ? 'festival' : '' }} {{ unset ? 'unset' : '' }}">
{{ cnday }}
</view>
<view class="cn-day {{festival ? 'festival' : ''}} {{unset ? 'unset' : ''}}">
{{cnday}}
</view>

View File

@ -1,20 +1,22 @@
<ant-container title="{{ containerTitle }}">
<ant-container title="{{containerTitle}}">
<view
slot="headerRight"
onTap="handleToggle"
data-id="demo1">
<!-- display: inline -->
<text a:if="{{ !collapse }}">收起</text>
<!-- display: inline -->
data-id="demo1"
>
<!--display: inline-->
<text a:if="{{!collapse}}">收起</text>
<!--display: inline-->
<text a:else>展示</text>
</view>
<view a:if="{{ !collapse }}">
<slot name="content" />
<view a:if="{{!collapse}}">
<slot name="content"></slot>
</view>
<view
a:else
onTap="handleToggle">
<slot name="description" />
onTap="handleToggle"
>
<slot name="description"></slot>
<view class="placeholder">展示</view>
</view>
</ant-container>
</ant-container>

View File

@ -1,134 +1,150 @@
<collapse-container
a:if="{{ demo1.visible }}"
title="默认多选,范围 3 个月">
a:if="{{demo1.visible}}"
title="默认多选,范围 3 个月"
>
<view
slot="content"
style="height: 1000rpx">
<ant-calendar defaultValue="{{ demo1.defaultValue }}" />
style="height: 1000rpx"
>
<ant-calendar defaultValue="{{demo1.defaultValue}}"></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo2.visible }}"
title="单选">
a:if="{{demo2.visible}}"
title="单选"
>
<view
slot="content"
style="height: 1000rpx">
style="height: 1000rpx"
>
<ant-calendar
selectionMode="single"
defaultValue="{{ demo2.defaultValue }}"
changedScrollIntoView />
defaultValue="{{demo2.defaultValue}}"
changedScrollIntoView
></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo3.visible }}"
title="自定义日历顶部">
a:if="{{demo3.visible}}"
title="自定义日历顶部"
>
<view slot="content">
<view class="custom-header">
<view
onTap="demo3PreviousMonth"
class="custom-header-left">
<ant-icon type="LeftOutline" />
class="custom-header-left"
>
<ant-icon type="LeftOutline"></ant-icon>
上个月
</view>
<view>{{ demo3.title }}</view>
<view>{{demo3.title}}</view>
<view
onTap="demo3NextMonth"
class="custom-header-right">
class="custom-header-right"
>
下个月
<ant-icon type="RightOutline" />
<ant-icon type="RightOutline"></ant-icon>
</view>
</view>
<ant-calendar monthRange="{{ demo3.monthRange }}">
<view slot="calendarTitle" />
<ant-calendar monthRange="{{demo3.monthRange}}">
<view slot="calendarTitle"></view>
</ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo8.visible }}"
title="自定义日期单元格">
a:if="{{demo8.visible}}"
title="自定义日期单元格"
>
<view slot="content">
<ant-calendar
monthRange="{{ demo8.monthRange }}"
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
monthRange="{{demo8.monthRange}}"
onFormatter="{{demo8Formatter ? demo8Formatter : 'demo8Formatter'}}"
onMonthFormatter="{{demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'}}"
></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo4.visible }}"
title="动态控制,只允许选择前后三天">
a:if="{{demo4.visible}}"
title="动态控制,只允许选择前后三天"
>
<view slot="content">
<ant-calendar
monthRange="{{ demo4.monthRange }}"
onFormatter="{{ demoFormatter ? demoFormatter : 'demoFormatter' }}" />
monthRange="{{demo4.monthRange}}"
onFormatter="{{demoFormatter ? demoFormatter : 'demoFormatter'}}"
></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo5.visible }}"
title="从周一开始">
a:if="{{demo5.visible}}"
title="从周一开始"
>
<view
slot="content"
style="height: 1000rpx">
<ant-calendar weekStartsOn="Monday" />
style="height: 1000rpx"
>
<ant-calendar weekStartsOn="Monday"></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo6.visible }}"
title="通过 slot 实现农历">
a:if="{{demo6.visible}}"
title="通过 slot 实现农历"
>
<view slot="content">
<ant-calendar monthRange="{{ demo6.monthRange }}">
<ant-calendar monthRange="{{demo6.monthRange}}">
<view
slot="cell-bottom"
slot-scope="prop">
<cn-day cell="{{ prop.cell }}" />
slot-scope="prop"
>
<cn-day cell="{{prop.cell}}"></cn-day>
</view>
</ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo7.visible }}"
title="国际化">
a:if="{{demo7.visible}}"
title="国际化"
>
<view slot="content">
<ant-calendar
monthRange="{{ demo7.monthRange }}"
localeText="{{ demo7.localeText }}" />
monthRange="{{demo7.monthRange}}"
localeText="{{demo7.localeText}}"
></ant-calendar>
</view>
</collapse-container>
<collapse-container
a:if="{{ demo9.visible }}"
title="受控模式">
a:if="{{demo9.visible}}"
title="受控模式"
>
<view
slot="content"
style="height: 1000rpx">
style="height: 1000rpx"
>
<ant-calendar
ref="handleRef"
value="{{ demo9.value }}"
value="{{demo9.value}}"
onChange="demo9HandleChange"
selectionMode="single"
changedScrollIntoView />
changedScrollIntoView
></ant-calendar>
<ant-button
type="primary"
onTap="demo9HandlePreviousDay">
onTap="demo9HandlePreviousDay"
>
上一天
</ant-button>
<ant-button
style="margin-top: 8rpx"
type="primary"
onTap="demo9HandleNextDay">
onTap="demo9HandleNextDay"
>
下一天
</ant-button>
<ant-button
style="margin-top: 8rpx"
type="primary"
onTap="demo9HandleScrollIntoView">
onTap="demo9HandleScrollIntoView"
>
滚动到指定日期
</ant-button>
</view>
</collapse-container>
</collapse-container>

View File

@ -4,72 +4,75 @@
<ant-cascader-picker
slot="extra"
placeholder="请选择归属地"
options="{{ cityList }}"
options="{{cityList}}"
onChange="handleCityPickerChange"
onOk="handleCityOnOk"
onCancel="handleDismiss" />
onCancel="handleDismiss"
></ant-cascader-picker>
</ant-list-item>
</ant-list>
<ant-list header="默认值">
<ant-list-item>
请选择城市
<ant-cascader-picker
slot="extra"
defaultValue="{{ ['34', '330'] }}"
defaultValue="{{['34', '330']}}"
placeholder="请选择城市"
options="{{ cityList }}"
options="{{cityList}}"
onChange="handleCityPickerChange"
onOk="handleCityOnOk" />
onOk="handleCityOnOk"
></ant-cascader-picker>
</ant-list-item>
</ant-list>
<ant-list header="受控模式">
<ant-list-item>
请选择城市
<ant-cascader-picker
slot="extra"
value="{{ value }}"
value="{{value}}"
placeholder="请选择城市"
options="{{ cityList }}"
options="{{cityList}}"
onChange="handleCityPickerChange"
onOk="handleOk" />
onOk="handleOk"
></ant-cascader-picker>
</ant-list-item>
<view class="btn-wrapper">
<ant-button
inline
onTap="handleChangeControlled"
style="margin-right: 8px">
style="margin-right: 8px"
>
选择上海
</ant-button>
<ant-button
inline
onTap="handleClearControlled">
onTap="handleClearControlled"
>
清空
</ant-button>
</view>
</ant-list>
<ant-container style="margin-top: 20rpx">
<ant-list header="外部控制选择器是否显示">
<ant-list-item>
请选择省市
<ant-cascader-picker
slot="extra"
visible="{{ pickerVisible }}"
visible="{{pickerVisible}}"
placeholder="请选择归属地"
options="{{ cityList }}"
options="{{cityList}}"
onChange="handleCityPickerChange"
onVisibleChange="handleTriggerControlledPicker"
onOk="handleCityOnOk"
onCancel="handleDismiss" />
onCancel="handleDismiss"
></ant-cascader-picker>
</ant-list-item>
</ant-list>
<ant-button
size="medium"
type="primary"
onTap="handleOpenPicker">
onTap="handleOpenPicker"
>
打开 CascaderPicker
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,36 +1,34 @@
<ant-container title="基础用法">
<ant-checkbox onChange="onChange">Checkbox</ant-checkbox>
</ant-container>
<ant-container title="初始值">
<ant-checkbox defaultChecked="{{ true }}">Checkbox</ant-checkbox>
<ant-checkbox defaultChecked="{{true}}">Checkbox</ant-checkbox>
</ant-container>
<ant-container title="禁用模式">
<ant-checkbox disabled>Checkbox1</ant-checkbox>
<ant-checkbox
defaultChecked
disabled>
disabled
>
Checkbox2
</ant-checkbox>
</ant-container>
<ant-container title="自定义颜色">
<ant-checkbox
color="red"
defaultChecked>
defaultChecked
>
Checkbox
</ant-checkbox>
</ant-container>
<ant-container title="控制模式">
<view>
<ant-checkbox
checked="{{ checked }}"
onChange="handleChange">
checked="{{checked}}"
onChange="handleChange"
>
Checkbox
</ant-checkbox>
</view>
<ant-button onTap="toggleChange">切换</ant-button>
</ant-container>
</ant-container>

View File

@ -1,26 +1,29 @@
<import-sjs
from="./index.sjs"
name="utils" />
name="utils"
></import-sjs>
<ant-container title="自定义分组">
<block
a:for="{{ options }}"
a:for="{{options}}"
a:for-index="index"
a:for-item="option">
<ant-list header="{{ option.title }}">
a:for-item="option"
>
<ant-list header="{{option.title}}">
<block
a:for="{{ option.list }}"
a:for="{{option.list}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<ant-list-item>
<ant-checkbox
data-value="{{ item.value }}"
checked="{{ utils.indexOf(value, item.value) > -1 }}"
onChange="onChange">
{{ item.title }}
data-value="{{item.value}}"
checked="{{utils.indexOf(value, item.value) > -1}}"
onChange="onChange"
>
{{item.title}}
</ant-checkbox>
</ant-list-item>
</block>
</ant-list>
</block>
</ant-container>
</ant-container>

View File

@ -1,42 +1,49 @@
<ant-container title="基础用法">
<ant-checkbox-group
options="{{ options }}"
onChange="onChange" />
options="{{options}}"
onChange="onChange"
></ant-checkbox-group>
</ant-container>
<ant-container title="初始值">
<ant-checkbox-group
defaultValue="{{ ['banana'] }}"
options="{{ options }}"
onChange="onChange" />
defaultValue="{{['banana']}}"
options="{{options}}"
onChange="onChange"
></ant-checkbox-group>
</ant-container>
<ant-container title="横向布局">
<ant-checkbox-group
options="{{ options }}"
position="horizontal" />
options="{{options}}"
position="horizontal"
></ant-checkbox-group>
</ant-container>
<ant-container title="禁用模式">
<ant-checkbox-group
options="{{ options }}"
disabled />
options="{{options}}"
disabled
></ant-checkbox-group>
</ant-container>
<ant-container title="受控模式">
<ant-checkbox-group
value="{{ value }}"
options="{{ options }}"
onChange="handleChange" />
value="{{value}}"
options="{{options}}"
onChange="handleChange"
></ant-checkbox-group>
</ant-container>
<ant-container title="自定义颜色">
<ant-checkbox-group
options="{{ options }}"
defaultValue="{{ ['apple', 'banana'] }}"
color="red" />
options="{{options}}"
defaultValue="{{['apple', 'banana']}}"
color="red"
></ant-checkbox-group>
</ant-container>
<ant-container title="自定义 Label">
<ant-checkbox-group options="{{ options }}">
<ant-checkbox-group options="{{options}}">
<view
slot="label"
slot-scope="item">
{{ item.index + 1 }} {{ item.value.label }}
slot-scope="item"
>
{{item.index + 1}} {{item.value.label}}
</view>
</ant-checkbox-group>
</ant-container>
</ant-container>

View File

@ -1,59 +1,62 @@
<ant-container title="简单布局-单选">
<ant-checklist
defaultValue="{{ [1] }}"
options="{{ options_1 }}"
data-options="{{ options_1 }}"
onChange="onChange" />
defaultValue="{{[1]}}"
options="{{options_1}}"
data-options="{{options_1}}"
onChange="onChange"
></ant-checklist>
</ant-container>
<ant-container title="复杂布局-多选">
<ant-checklist
defaultValue="{{ [1, 2] }}"
options="{{ options_2 }}"
defaultValue="{{[1, 2]}}"
options="{{options_2}}"
multiple
onChange="onChange" />
onChange="onChange"
></ant-checklist>
</ant-container>
<ant-container title="受控模式">
<ant-checklist
value="{{ value }}"
options="{{ options_2 }}"
value="{{value}}"
options="{{options_2}}"
multiple
onChange="onChangeControlled" />
onChange="onChangeControlled"
></ant-checklist>
</ant-container>
<ant-container title="禁用状态">
<ant-checklist
defaultValue="{{ [2] }}"
options="{{ options_3 }}"
defaultValue="{{[2]}}"
options="{{options_3}}"
multiple
onChange="onChange" />
onChange="onChange"
></ant-checklist>
</ant-container>
<ant-container title="只读状态">
<ant-checklist
defaultValue="{{ [2] }}"
options="{{ options_4 }}"
defaultValue="{{[2]}}"
options="{{options_4}}"
multiple
onChange="onChange" />
onChange="onChange"
></ant-checklist>
</ant-container>
<ant-container title="自定义勾选图标&&组件内容">
<ant-checklist
defaultValue="{{ [2] }}"
options="{{ options_3 }}"
defaultValue="{{[2]}}"
options="{{options_3}}"
multiple
onChange="onChange">
onChange="onChange"
>
<view slot="icon">
<ant-icon
style="color: red"
type="LikeOutline"
className="demo-checklist-checked-icon" />
className="demo-checklist-checked-icon"
></ant-icon>
</view>
<view
slot="content"
slot-scope="props">
title: {{ props.item.title }}
slot-scope="props"
>
title: {{props.item.title}}
</view>
</ant-checklist>
</ant-container>
</ant-container>

View File

@ -1,4 +1,5 @@
<ant-collapse
defaultCurrent="{{ [0] }}"
items="{{ items }}"
onChange="onChange" />
defaultCurrent="{{[0]}}"
items="{{items}}"
onChange="onChange"
></ant-collapse>

View File

@ -1,4 +1,5 @@
<ant-collapse
items="{{ items }}"
items="{{items}}"
onChange="onChange"
accordion />
accordion
></ant-collapse>

View File

@ -1,20 +1,24 @@
<ant-button
onTap="toggle"
inline>
inline
>
切换
</ant-button>
<ant-button
onTap="changeContent"
inline>
inline
>
修改content
</ant-button>
<ant-button
onTap="addItems"
inline>
inline
>
添加items
</ant-button>
{{ current }}
{{current}}
<collapse
items="{{ items }}"
current="{{ current }}"
onChange="onChange" />
items="{{items}}"
current="{{current}}"
onChange="onChange"
></collapse>

View File

@ -1,23 +1,24 @@
<import-sjs
from="./index.sjs"
name="_sjs" />
<collapse items="{{ items }}">
name="_sjs"
></import-sjs>
<collapse items="{{items}}">
<view
slot="title"
slot-scope="item">
{{ item.value.title }} {{ _sjs.itemContent(item.current, item) }}
slot-scope="item"
>
{{item.value.title}} {{_sjs.itemContent(item.current, item)}}
</view>
<view
slot="brief"
slot-scope="item">
{{ item.value.brief }}
slot-scope="item"
>
{{item.value.brief}}
</view>
<view
slot="icon"
slot-scope="item">
{{ _sjs.extraText(item.current, item) }}
slot-scope="item"
>
{{_sjs.extraText(item.current, item)}}
</view>
</collapse>
</collapse>

View File

@ -1,26 +1,28 @@
<ant-collapse items="{{ items }}">
<ant-collapse items="{{items}}">
<view
class="title"
slot="title"
slot-scope="item"
class="title">
>
<view catchTap="true">
<ant-checkbox
data-index="{{ item.index }}"
onChange="onChange" />
data-index="{{item.index}}"
onChange="onChange"
></ant-checkbox>
</view>
<view>{{ item.value.title }}</view>
<view>{{item.value.title}}</view>
</view>
<view
class="content"
slot="content"
slot-scope="item"
class="content">
{{ item.value.content }}
>
{{item.value.content}}
</view>
</ant-collapse>
<ant-button
type="primary"
onTap="onTap">
onTap="onTap"
>
提交
</ant-button>
</ant-button>

View File

@ -1,30 +1,31 @@
<ant-container title="标题">
<view class="content" />
<view class="content"></view>
</ant-container>
<ant-container headerInBox="{{ false }}">
<ant-container headerInBox="{{false}}">
<view slot="title">
<view class="icon">
<ant-icon
type="SmileOutline"
style="margin-right: 8px" />
style="margin-right: 8px"
></ant-icon>
标题
</view>
</view>
<view slot="headerRight">右侧内容</view>
<view class="content" />
<view class="content"></view>
</ant-container>
<ant-container title="标题">
<view slot="headerRight">右侧内容</view>
<view class="content">
<view class="box" />
<view class="box" />
<view class="box" />
<view class="box"></view>
<view class="box"></view>
<view class="box"></view>
</view>
</ant-container>
<ant-container>
<view class="content" />
<view class="content"></view>
<view slot="headerRight">右侧内容</view>
</ant-container>
<ant-container>
<view class="content" />
</ant-container>
<view class="content"></view>
</ant-container>

View File

@ -2,28 +2,30 @@
<ant-list-item>
请选择日期
<ant-date-picker
min="{{ min }}"
max="{{ max }}"
min="{{min}}"
max="{{max}}"
slot="extra"
defaultValue="{{ defaultDate }}"
defaultValue="{{defaultDate}}"
placeholder="请选择"
onPickerChange="handlePickerChange"
onVisibleChange="handleTriggerPicker"
onCancel="handleDismiss"
onOk="handleOk" />
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
<ant-list-item>
请选择日期(点击蒙层不关闭)
<ant-date-picker
min="{{ min }}"
max="{{ max }}"
min="{{min}}"
max="{{max}}"
slot="extra"
defaultValue="{{ defaultDate }}"
defaultValue="{{defaultDate}}"
placeholder="请选择"
onPickerChange="handlePickerChange"
onVisibleChange="handleTriggerPicker"
maskClosable="{{ false }}"
onOk="handleOk" />
maskClosable="{{false}}"
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
</ant-list>
<ant-list header="选择精度">
@ -34,7 +36,8 @@
precision="year"
format="YYYY"
placeholder="选择"
onOk="handleOk" />
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
<ant-list-item>
请选择月份
@ -44,7 +47,8 @@
format="YYYY-MM"
placeholder="选择"
onVisibleChange="handleTriggerPicker"
onOk="handleOk" />
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
<ant-list-item>
请选择时间
@ -54,7 +58,8 @@
format="YYYY-MM-DD HH:mm"
placeholder="选择"
onVisibleChange="handleTriggerPicker"
onOk="handleOk" />
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
</ant-list>
<ant-list header="禁用状态">
@ -62,24 +67,26 @@
请选择日期
<ant-date-picker
slot="extra"
defaultValue="{{ defaultDate }}"
disabled />
defaultValue="{{defaultDate}}"
disabled
></ant-date-picker>
</ant-list-item>
</ant-list>
<ant-list header="自定义每列的渲染内容">
<ant-list-item>
每列不显示单位
<ant-date-picker
min="{{ min }}"
max="{{ max }}"
min="{{min}}"
max="{{max}}"
slot="extra"
defaultValue="{{ defaultDate }}"
defaultValue="{{defaultDate}}"
placeholder="请选择"
onPickerChange="handlePickerChange"
onVisibleChange="handleTriggerPicker"
onCancel="handleDismiss"
onOk="handleOk"
onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
onFormatLabel="{{handleFormatLabel ? handleFormatLabel : 'handleFormatLabel'}}"
></ant-date-picker>
</ant-list-item>
</ant-list>
<ant-list header="时间范围选择">
@ -88,29 +95,32 @@
<ant-range-picker
slot="extra"
placeholder="请选择"
defaultValue="{{ defaultDateRange }}"
defaultValue="{{defaultDateRange}}"
onPickerChange="handlePickerRangeChange"
onVisibleChange="handleTriggerPicker"
onOk="handleRangeOk" />
onOk="handleRangeOk"
></ant-range-picker>
</ant-list-item>
<ant-list-item>
受控模式
<ant-range-picker
slot="extra"
placeholder="请选择"
value="{{ controlledDateRange }}"
onOk="handleControlledRangeOk" />
value="{{controlledDateRange}}"
onOk="handleControlledRangeOk"
></ant-range-picker>
</ant-list-item>
<ant-list-item>
每列不显示单位
<ant-range-picker
slot="extra"
placeholder="请选择"
defaultValue="{{ defaultDateRange }}"
defaultValue="{{defaultDateRange}}"
onPickerChange="handlePickerRangeChange"
onVisibleChange="handleTriggerPicker"
onOk="handleRangeOk"
onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
onFormatLabel="{{handleFormatLabel ? handleFormatLabel : 'handleFormatLabel'}}"
></ant-range-picker>
</ant-list-item>
</ant-list>
<ant-container style="margin-top: 20rpx">
@ -118,23 +128,24 @@
<ant-list-item>
请选择时间
<ant-date-picker
min="{{ min }}"
max="{{ max }}"
min="{{min}}"
max="{{max}}"
slot="extra"
visible="{{ pickerVisible }}"
defaultValue="{{ defaultDate }}"
visible="{{pickerVisible}}"
defaultValue="{{defaultDate}}"
placeholder="请选择"
onPickerChange="handlePickerChange"
onVisibleChange="handleTriggerControlledPicker"
onCancel="handleDismiss"
onOk="handleOk" />
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
</ant-list>
<ant-button
size="medium"
type="primary"
onTap="handleOpenPicker">
onTap="handleOpenPicker"
>
打开 DatePicker
</ant-button>
</ant-container>
@ -144,19 +155,20 @@
请选择日期范围
<ant-range-picker
slot="extra"
visible="{{ dateRangePickerVisible }}"
visible="{{dateRangePickerVisible}}"
placeholder="请选择"
defaultValue="{{ defaultDateRange }}"
defaultValue="{{defaultDateRange}}"
onPickerChange="handlePickerRangeChange"
onVisibleChange="handleTriggerControlledDateRangePicker"
onOk="handleRangeOk" />
onOk="handleRangeOk"
></ant-range-picker>
</ant-list-item>
</ant-list>
<ant-button
size="medium"
type="primary"
onTap="handleOpenDateRangePicker">
onTap="handleOpenDateRangePicker"
>
打开 DateRangePicker
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,38 +1,42 @@
<ant-container
title="水平分割线"
headerInBox="{{ false }}">
<ant-divider />
headerInBox="{{false}}"
>
<ant-divider></ant-divider>
</ant-container>
<ant-container
title="水平分割线-带文字"
headerInBox="{{ false }}">
<ant-divider text="中间内容" />
headerInBox="{{false}}"
>
<ant-divider text="中间内容"></ant-divider>
<ant-divider
text="左侧内容"
textPosition="left" />
textPosition="left"
></ant-divider>
<ant-divider
text="右侧内容"
textPosition="right" />
textPosition="right"
></ant-divider>
</ant-container>
<ant-container
title="水平分割线-自定义"
headerInBox="{{ false }}">
headerInBox="{{false}}"
>
<ant-divider
text="自定义样式"
textStyle="color:#1677ff; fontWeight:600"
lineHeight="{{ 2 }}"
lineHeight="{{2}}"
lineType="dashed"
lineColor="#1677ff" />
lineColor="#1677ff"
></ant-divider>
</ant-container>
<ant-container
title="垂直分割线"
headerInBox="{{ false }}">
headerInBox="{{false}}"
>
<view class="divider-vertical">
<view>100m</view>
<ant-divider direction="vertical" />
<ant-divider direction="vertical"></ant-divider>
<view>浙江省杭州市西湖区西溪路556号</view>
</view>
</ant-container>
</ant-container>

View File

@ -1,33 +1,36 @@
<ant-container title="基础样式">
<ant-empty
title="这里什么也没有"
message="看看其它吧" />
message="看看其它吧"
></ant-empty>
</ant-container>
<ant-container title="添加操作按钮组">
<ant-empty
title="这里什么也没有"
message="看看其它吧">
message="看看其它吧"
>
<view slot="extra">
<ant-button
size="small"
inline>
inline
>
操作1
</ant-button>
<ant-button
type="primary"
size="small"
inline
style="margin-left: 12px">
style="margin-left: 12px"
>
操作2
</ant-button>
</view>
</ant-empty>
</ant-container>
<ant-container title="自定义图片">
<ant-empty
title="这里什么也没有"
message="看看其它吧"
image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ" />
</ant-container>
image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ"
></ant-empty>
</ant-container>

View File

@ -1,27 +1,23 @@
<form-input
label="用户名"
name="user.account"
name="account"
placeholder="请输入用户名"
tooltip="用户名说明"
allowClear
ref="handleRef" />
<form-input
label="手机号"
name="user.phone"
placeholder="请输入手机号"
tooltip="手机号说明"
allowClear
ref="handleRef" />
ref="handleRef"
></form-input>
<form-input
label="密码"
name="user.password"
name="password"
placeholder="请输入密码"
allowClear
ref="handleRef">
ref="handleRef"
>
<view slot="tooltip">
<ant-icon
onTap="showToast"
type="QuestionCircleOutline" />
type="QuestionCircleOutline"
></ant-icon>
</view>
</form-input>
<form-input
@ -29,91 +25,102 @@
name="address"
placeholder="请输入地址"
allowClear
ref="handleRef" />
ref="handleRef"
></form-input>
<form-switch
label="选择"
name="needDelivery"
ref="handleRef" />
ref="handleRef"
></form-switch>
<form-stepper
label="数量"
name="quantity"
ref="handleRef" />
ref="handleRef"
></form-stepper>
<form-picker
label="水果"
arrow
name="fruit"
options="{{ fruitList }}"
ref="handleRef" />
options="{{fruitList}}"
ref="handleRef"
></form-picker>
<form-date-picker
label="出生日期"
arrow
name="birthday"
ref="handleRef" />
ref="handleRef"
></form-date-picker>
<form-range-picker
label="时间范围"
arrow
name="range"
ref="handleRef" />
ref="handleRef"
></form-range-picker>
<form-cascader-picker
label="城市"
arrow
options="{{ cityList }}"
options="{{cityList}}"
name="city"
tooltip="选择城市"
placeholder="请输入城市"
ref="handleRef" />
ref="handleRef"
></form-cascader-picker>
<form-radio-group
label="动物单选"
name="animalChoose"
color="red"
options="{{ radioGroupOptions }}"
ref="handleRef" />
options="{{radioGroupOptions}}"
ref="handleRef"
></form-radio-group>
<form-checkbox-group
label="蔬菜多选"
name="fruitChoose"
options="{{ checkboxGroupOptions }}"
ref="handleRef" />
options="{{checkboxGroupOptions}}"
ref="handleRef"
></form-checkbox-group>
<form-selector
label="喜好"
name="likeChoose"
options="{{ selectorOptions }}"
ref="handleRef" />
options="{{selectorOptions}}"
ref="handleRef"
></form-selector>
<form-slider
label="选择分数"
name="slider"
showTooltip
ref="handleRef" />
ref="handleRef"
></form-slider>
<form-upload-image
label="图片"
name="image"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
ref="handleRef" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
ref="handleRef"
></form-upload-image>
<form-textarea
label="说明"
name="description"
placeholder="请输入说明"
allowClear
autoHeight
ref="handleRef" />
ref="handleRef"
></form-textarea>
<form-rate
label="评分"
name="rate"
ref="handleRef" />
ref="handleRef"
></form-rate>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button
onTap="reset"
style="margin-bottom: 12px">
重置
</ant-button>
<ant-button onTap="update">修改</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
<ant-toast
content="密码的自定义 tooltip"
visible="{{ toastShow }}"
onClose="handleCloseToast" />
visible="{{toastShow}}"
onClose="handleCloseToast"
></ant-toast>

View File

@ -1,51 +1,56 @@
<import-sjs
from="./index.sjs"
name="utils" />
name="utils"
></import-sjs>
<form-item
className="{{ className }}"
position="{{ position }}"
label="{{ label }}"
status="{{ formData.status }}"
errors="{{ formData.errors }}"
tooltip="{{ tooltip }}"
required="{{ formData.required }}"
requiredMark="{{ requiredMark }}"
validateStatus="{{ validateStatus }}"
help="{{ help }}">
className="{{className}}"
position="{{position}}"
label="{{label}}"
status="{{formData.status}}"
errors="{{formData.errors}}"
tooltip="{{tooltip}}"
required="{{formData.required}}"
requiredMark="{{requiredMark}}"
validateStatus="{{validateStatus}}"
help="{{help}}"
>
<view
class="input"
onTap="showPopup">
onTap="showPopup"
>
<view class="input-items">
<block
a:for="{{ formData.value }}"
a:for="{{formData.value}}"
a:for-index="index"
a:for-item="item">
<view class="input-item">{{ utils.getTitle(options, item) }}</view>
a:for-item="item"
>
<view class="input-item">{{utils.getTitle(options, item)}}</view>
</block>
</view>
<view class="choose">
请选择
<icon type="RightOutline" />
<icon type="RightOutline"></icon>
</view>
</view>
<view slot="extra">
<slot name="extra">{{ extra }}</slot>
<slot name="extra">
{{extra}}
</slot>
</view>
</form-item>
<popup
visible="{{ visible }}"
height="{{ 250 }}"
width="{{ 250 }}"
visible="{{visible}}"
height="{{250}}"
width="{{250}}"
position="right"
onClose="handlePopupClose">
onClose="handlePopupClose"
>
<view style="padding: 12px">
<checklist
options="{{ options }}"
options="{{options}}"
multiple
value="{{ formData.value }}"
onChange="onChange" />
value="{{formData.value}}"
onChange="onChange"
></checklist>
</view>
</popup>
</popup>

View File

@ -6,35 +6,37 @@
placeholder="请输入用户名"
position="vertical"
inputClassName="input"
ref="handleRef" />
ref="handleRef"
></form-input>
<form-checklist
label="喜欢"
name="like"
required
message="需要选择"
options="{{ likeOptions }}"
options="{{likeOptions}}"
position="vertical"
ref="handleRef" />
ref="handleRef"
></form-checklist>
<form-location
label="位置"
name="location"
required
message="需要选择位置"
position="vertical"
ref="handleRef" />
ref="handleRef"
></form-location>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
className="button">
className="button"
>
提交
</ant-button>
<ant-button
onTap="reset"
className="button">
className="button"
>
重置
</ant-button>
</view>
</view>

View File

@ -1,28 +1,31 @@
<form-item
className="{{ className }}"
position="{{ position }}"
label="{{ label }}"
status="{{ formData.status }}"
errors="{{ formData.errors }}"
tooltip="{{ tooltip }}"
required="{{ formData.required }}"
requiredMark="{{ requiredMark }}"
validateStatus="{{ validateStatus }}"
help="{{ help }}">
className="{{className}}"
position="{{position}}"
label="{{label}}"
status="{{formData.status}}"
errors="{{formData.errors}}"
tooltip="{{tooltip}}"
required="{{formData.required}}"
requiredMark="{{requiredMark}}"
validateStatus="{{validateStatus}}"
help="{{help}}"
>
<view
class="input"
onTap="showPopup">
onTap="showPopup"
>
<view class="input-location">
<view a:if="{{ formData.value }}">{{ formData.value.name }}</view>
<view a:if="{{ formData.value }}">{{ formData.value.address }}</view>
<view a:if="{{formData.value}}">{{formData.value.name}}</view>
<view a:if="{{formData.value}}">{{formData.value.address}}</view>
</view>
<view class="choose">
请选择
<icon type="RightOutline" />
<icon type="RightOutline"></icon>
</view>
</view>
<view slot="extra">
<slot name="extra">{{ extra }}</slot>
<slot name="extra">
{{extra}}
</slot>
</view>
</form-item>
</form-item>

View File

@ -5,21 +5,24 @@
placeholder="请输入用户名"
message="需要输入用户名"
validateStatus="success"
ref="handleRef">
ref="handleRef"
>
<view
slot="footer"
slot-scope="item">
slot-scope="item"
>
<view
a:if="{{ item.status === 'error' }}"
class="errors">
a:if="{{item.status === 'error'}}"
class="errors"
>
<ant-icon
type="CloseCircleOutline"
style="margin-right: 4px" />
{{ item.errors }}
style="margin-right: 4px"
></ant-icon>
{{item.errors}}
</view>
</view>
</ant-form-input>
<ant-form-input
label="地址"
name="address"
@ -27,31 +30,36 @@
placeholder="请输入地址"
message="需要输入地址"
validateStatus="success"
ref="handleRef">
ref="handleRef"
>
<view
slot="footer"
slot-scope="item">
slot-scope="item"
>
<view
a:if="{{ item.status === 'error' }}"
class="errors">
a:if="{{item.status === 'error'}}"
class="errors"
>
<ant-icon
type="CloseCircleOutline"
style="margin-right: 4px" />
{{ item.errors }}
style="margin-right: 4px"
></ant-icon>
{{item.errors}}
</view>
</view>
</ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button
onTap="reset"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
重置
</ant-button>
</view>
</view>

View File

@ -2,27 +2,29 @@
label="需要水果"
name="needFruit"
onChange="onChange"
ref="handleRef" />
<view a:if="{{ needFruit }}">
ref="handleRef"
></form-switch>
<view a:if="{{needFruit}}">
<form-stepper
label="数量"
name="quantity"
ref="handleRef" />
ref="handleRef"
></form-stepper>
<form-input
label="收货地址"
name="address"
required
message="需要填写收货地址"
ref="handleRef" />
ref="handleRef"
></form-input>
</view>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</view>

View File

@ -1,38 +1,44 @@
<block
a:for="{{ list }}"
a:for="{{list}}"
a:for-index="index"
a:for-item="item"
a:key="id">
key="{{item['id']}}"
>
<ant-form-input
label="{{ list[index].id }}"
name="account{{ list[index].id }}"
label="{{list[index].id}}"
name="account{{list[index].id}}"
required
message="需要输入用户名"
ref="handleRef">
ref="handleRef"
>
<view
slot="extra"
onTap="minus"
data-index="{{ index }}">
<ant-icon type="MinusCircleOutline" />
data-index="{{index}}"
>
<ant-icon type="MinusCircleOutline"></ant-icon>
</view>
</ant-form-input>
</block>
<view class="buttons">
<ant-button
onTap="add"
className="button">
className="button"
>
添加用户
<ant-icon type="AddCircleOutline" />
<ant-icon type="AddCircleOutline"></ant-icon>
</ant-button>
<ant-button
type="primary"
onTap="submit"
className="button">
className="button"
>
提交
</ant-button>
<ant-button
onTap="reset"
className="button">
className="button"
>
重置
</ant-button>
</view>
</view>

View File

@ -1,20 +1,23 @@
<ant-form-input
label="用户名"
name="username"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-image-upload
label="图片上传"
name="imageList"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
maxCount="{{ 3 }}"
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
maxCount="{{3}}"
tooltip="需要上传3张图片"
ref="handleRef" />
ref="handleRef"
></ant-form-image-upload>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</view>

View File

@ -5,30 +5,31 @@
allowClear
required
message="需要填写用户名"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
allowClear
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-switch
label="选择"
name="needDelivery"
ref="handleRef" />
ref="handleRef"
></ant-form-switch>
<ant-form-stepper
label="数量"
name="quantity"
ref="handleRef" />
ref="handleRef"
></ant-form-stepper>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</view>

View File

@ -5,30 +5,31 @@
allowClear
required
message="需要填写用户名"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
allowClear
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-switch
label="选择"
name="needDelivery"
ref="handleRef" />
ref="handleRef"
></ant-form-switch>
<ant-form-stepper
label="数量"
name="quantity"
ref="handleRef" />
ref="handleRef"
></ant-form-stepper>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</view>

View File

@ -1,4 +1,8 @@
<block a:for="{{config.formItems}}">
<block
a:for="{{config.formItems}}"
a:for-index="index"
a:for-item="item"
>
<form-input
a:if="{{item.type === 'input'}}"
label="{{item.label}}"
@ -6,39 +10,40 @@
required="{{item.required}}"
message="{{item.message}}"
placeholder="{{item.placeholder}}"
ref="handleRef" />
ref="handleRef"
></form-input>
<form-switch
a:elif="{{item.type === 'switch'}}"
label="{{item.label}}"
name="{{item.name}}"
message="{{item.message}}"
ref="handleRef" />
ref="handleRef"
></form-switch>
<form-stepper
a:elif="{{item.type === 'stepper'}}"
label="{{item.label}}"
name="{{item.name}}"
required="{{item.required}}"
message="{{item.message}}"
ref="handleRef" />
ref="handleRef"
></form-stepper>
<slot
a:else
name="{{item.type}}"
value="{{item}}" />
a:else
value="{{item}}"
></slot>
</block>
<button
type="{{config.submit.type}}"
style="{{config.submit.style}}"
onTap="submit">
onTap="submit"
>
{{config.submit.text}}
</button>
<button
type="{{config.reset.type}}"
style="{{config.reset.style}}"
onTap="reset">
onTap="reset"
>
{{config.reset.text}}
</button>
</button>

View File

@ -1,25 +1,30 @@
<form-json
config="{{config}}"
onSuccess="onSuccess"
ref="handleFormJSONRef">
ref="handleFormJSONRef"
>
<view
slot="custom-input"
slot-scope="item">
slot-scope="item"
>
<form-input
label="{{item.value.label}}"
name="{{item.value.name}}"
required="{{item.value.required}}"
placeholder="{{item.value.placeholder}}"
message="{{item.value.message}}"
ref="handleRef" />
ref="handleRef"
></form-input>
</view>
<view
slot="custom-switch"
slot-scope="item">
slot-scope="item"
>
<form-switch
label="{{item.value.label}}"
name="{{item.value.name}}"
message="{{item.value.message}}"
ref="handleRef" />
ref="handleRef"
></form-switch>
</view>
</form-json>
</form-json>

View File

@ -2,42 +2,45 @@
label="用户名"
name="account"
required
position="{{ position }}"
ref="handleRef" />
position="{{position}}"
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
position="{{ position }}"
ref="handleRef" />
position="{{position}}"
ref="handleRef"
></ant-form-input>
<ant-form-switch
label="选择"
name="needDelivery"
position="{{ position }}"
ref="handleRef" />
position="{{position}}"
ref="handleRef"
></ant-form-switch>
<ant-form-stepper
label="数量"
name="quantity"
position="{{ position }}"
ref="handleRef" />
position="{{position}}"
ref="handleRef"
></ant-form-stepper>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
className="button">
className="button"
>
提交
</ant-button>
<ant-button
onTap="reset"
className="button">
className="button"
>
重置
</ant-button>
<ant-button
onTap="toggle"
className="button">
className="button"
>
切换表单布局
</ant-button>
</view>
</view>

View File

@ -5,25 +5,25 @@
allowClear
required
message="需要填写用户名"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
allowClear
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</ant-container>
<ant-container title="表单2">
<ant-form-input
label="用户名"
@ -31,21 +31,22 @@
allowClear
required
message="需要填写用户名"
ref="handleRef2" />
ref="handleRef2"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
allowClear
ref="handleRef2" />
ref="handleRef2"
></ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit2"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset2">重置</ant-button>
</view>
</ant-container>
</ant-container>

View File

@ -3,32 +3,34 @@
name="account"
required
message="需要输入用户名"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="密码"
name="password"
password
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="重复密码"
name="confirm"
password
dependencies="{{ ['password'] }}"
ref="handleRef" />
dependencies="{{['password']}}"
ref="handleRef"
></ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button
onTap="reset"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
重置
</ant-button>
<ant-button onTap="fill">Fill表单</ant-button>
</view>
</view>

View File

@ -3,25 +3,26 @@
name="account"
validateStatus="error"
help="需要填写用户名"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
help="需要填写地址"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="水果"
name="fruit"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button onTap="reset">重置</ant-button>
</view>
</view>

View File

@ -1,26 +1,31 @@
<ant-form-input
label="用户名"
name="account"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="密码"
name="password"
password
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="IP"
name="ip"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
提交
</ant-button>
<ant-button
onTap="reset"
style="margin-bottom: 12px">
style="margin-bottom: 12px"
>
重置
</ant-button>
</view>
</view>

View File

@ -3,33 +3,33 @@
name="account"
placeholder="请输入用户名"
required
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<ant-form-input
label="地址"
name="address"
placeholder="请输入地址"
ref="handleRef" />
ref="handleRef"
></ant-form-input>
<view style="margin: 12px">
onValuesChange:
<view style="margin: 12px">
<view>修改:{{ changedValuesText }}</view>
<view>表单:{{ allValuesText }}</view>
<view>修改:{{changedValuesText}}</view>
<view>表单:{{allValuesText}}</view>
</view>
</view>
<view class="buttons">
<ant-button
type="primary"
onTap="submit"
className="button">
className="button"
>
提交
</ant-button>
<ant-button
onTap="reset"
className="button">
className="button"
>
重置
</ant-button>
</view>
</view>

View File

@ -1,104 +1,122 @@
<ant-container title="2列">
<ant-grid
items="{{ items2 }}"
items="{{items2}}"
onTap="handleTapItem"
columns="{{ 2 }}" />
columns="{{2}}"
></ant-grid>
</ant-container>
<ant-container title="3列">
<ant-grid
items="{{ items3 }}"
items="{{items3}}"
onTap="handleTapItem"
columns="{{ 3 }}" />
columns="{{3}}"
></ant-grid>
</ant-container>
<ant-container title="4列">
<ant-grid
items="{{ items4 }}"
items="{{items4}}"
onTap="handleTapItem"
columns="{{ 4 }}" />
columns="{{4}}"
></ant-grid>
</ant-container>
<ant-container title="5列">
<ant-grid
items="{{ items5 }}"
items="{{items5}}"
onTap="handleTapItem"
columns="{{ 5 }}" />
columns="{{5}}"
></ant-grid>
</ant-container>
<ant-container title="5列-展示分割线">
<ant-grid
items="{{ items5 }}"
items="{{items5}}"
onTap="handleTapItem"
columns="{{ 5 }}"
showDivider />
columns="{{5}}"
showDivider
></ant-grid>
</ant-container>
<ant-container title="2列-带描述">
<ant-grid
items="{{ items2withDesc }}"
items="{{items2withDesc}}"
onTap="handleTapItem"
columns="{{ 2 }}" />
columns="{{2}}"
></ant-grid>
</ant-container>
<ant-container title="3列-带描述">
<ant-grid
items="{{ items3withDesc }}"
items="{{items3withDesc}}"
onTap="handleTapItem"
columns="{{ 3 }}" />
columns="{{3}}"
></ant-grid>
</ant-container>
<ant-container title="2列-元素横向布局">
<ant-grid
items="{{ items2 }}"
items="{{items2}}"
onTap="handleTapItem"
columns="{{ 2 }}"
gridItemLayout="horizontal" />
columns="{{2}}"
gridItemLayout="horizontal"
></ant-grid>
</ant-container>
<ant-container title="3列-元素横向布局">
<ant-grid
items="{{ items3 }}"
items="{{items3}}"
onTap="handleTapItem"
columns="{{ 3 }}"
gridItemLayout="horizontal" />
columns="{{3}}"
gridItemLayout="horizontal"
></ant-grid>
</ant-container>
<ant-container title="可滑动">
<ant-grid
items="{{ scrollItems }}"
items="{{scrollItems}}"
onTap="handleTapItem"
mode="scroll" />
mode="scroll"
></ant-grid>
</ant-container>
<ant-container title="自定义图标大小">
<ant-grid
items="{{ itemsCustom }}"
items="{{itemsCustom}}"
onTap="handleTapItem"
columns="{{ 5 }}"
iconSize="{{ 44 }}" />
columns="{{5}}"
iconSize="{{44}}"
></ant-grid>
</ant-container>
<ant-container title="自定义">
<ant-grid
items="{{ itemsCustom }}"
items="{{itemsCustom}}"
onTap="handleTapItem"
columns="{{ 5 }}">
columns="{{5}}"
>
<view
slot="icon"
slot-scope="props">
slot-scope="props"
>
<ant-badge
a:if="{{ props.value.tag }}"
a:if="{{props.value.tag}}"
offsetX="-10px"
type="text"
text="{{ props.value.tag }}">
text="{{props.value.tag}}"
>
<image
src="{{ props.value.icon }}"
style="width: 44px; height: 44px" />
src="{{props.value.icon}}"
style="width: 44px; height: 44px"
></image>
</ant-badge>
<image
a:else
src="{{ props.value.icon }}"
style="width: 44px; height: 44px" />
src="{{props.value.icon}}"
style="width: 44px; height: 44px"
></image>
</view>
<view
slot="title"
slot-scope="props">
第{{ props.index + 1 }}项
slot-scope="props"
>
第{{props.index + 1}}项
</view>
<view
slot="description"
slot-scope="props">
描述{{ props.index + 1 }}
slot-scope="props"
>
描述{{props.index + 1}}
</view>
</ant-grid>
</ant-container>
</ant-container>

View File

@ -1,73 +1,84 @@
<ant-guide-tour
items="{{ [list[0]] }}"
visible="{{ baseVisible }}"
onCancel="closeTour"
onChange="onChange" />
<ant-guide-tour
items="{{ list }}"
visible="{{ moreVisible }}"
onCancel="closeTour"
onChange="onChange" />
<ant-guide-tour
items="{{ list }}"
visible="{{ swiperVisible }}"
items="{{[list[0]]}}"
visible="{{baseVisible}}"
onCancel="closeTour"
onChange="onChange"
swiperable="{{ true }}" />
></ant-guide-tour>
<ant-guide-tour
items="{{ list }}"
current="{{ current }}"
visible="{{ controlledVisible }}"
items="{{list}}"
visible="{{moreVisible}}"
onCancel="closeTour"
onChange="onChangeControlled" />
onChange="onChange"
></ant-guide-tour>
<ant-guide-tour
items="{{ list }}"
visible="{{ slotVisible }}"
items="{{list}}"
visible="{{swiperVisible}}"
onCancel="closeTour"
onChange="onChange"
swiperable="{{true}}"
></ant-guide-tour>
<ant-guide-tour
items="{{list}}"
current="{{current}}"
visible="{{controlledVisible}}"
onCancel="closeTour"
onChange="onChangeControlled"
></ant-guide-tour>
<ant-guide-tour
items="{{list}}"
visible="{{slotVisible}}"
onCancel="closeTour"
onChange="onChange"
jumpText="跳过"
gotItText="知道了"
prevStepText="上一步"
nextStepText="下一步">
nextStepText="下一步"
>
<view
class="step-box"
slot="step"
slot-scope="props">
step-{{ props.index }}
slot-scope="props"
>
step-{{props.index}}
</view>
</ant-guide-tour>
<ant-container
title="基础用法"
className="list">
className="list"
>
<ant-button
onTap="openTour"
data-field="baseVisible">
data-field="baseVisible"
>
单图模式
</ant-button>
<ant-button
onTap="openTour"
data-field="moreVisible">
data-field="moreVisible"
>
多图模式
</ant-button>
<ant-button
onTap="openTour"
data-field="swiperVisible">
data-field="swiperVisible"
>
滑动模式
</ant-button>
<ant-button
onTap="openTour"
data-field="controlledVisible">
data-field="controlledVisible"
>
受控模式
</ant-button>
</ant-container>
<ant-container
title="插槽用法"
className="list">
className="list"
>
<ant-button
onTap="openTour"
data-field="slotVisible">
data-field="slotVisible"
>
开始
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,42 +1,44 @@
<ant-container title="基本使用">
<ant-icon type="SmileOutline" />
<ant-icon type="PayCircleOutline" />
<ant-icon type="LocationFill" />
<ant-icon type="SmileOutline"></ant-icon>
<ant-icon type="PayCircleOutline"></ant-icon>
<ant-icon type="LocationFill"></ant-icon>
</ant-container>
<ant-container title="自定义大小">
<ant-icon
type="SmileOutline"
style="font-size: 20px" />
style="font-size: 20px"
></ant-icon>
<ant-icon
type="SmileOutline"
style="font-size: 30px" />
style="font-size: 30px"
></ant-icon>
<ant-icon
type="SmileOutline"
className="custom-size" />
className="custom-size"
></ant-icon>
</ant-container>
<ant-container title="自定义颜色">
<ant-icon
type="SmileOutline"
style="color: red" />
style="color: red"
></ant-icon>
<ant-icon
type="SmileOutline"
className="custom-color" />
className="custom-color"
></ant-icon>
</ant-container>
<ant-container title="更多自定义">
<view class="custom">
<ant-icon type="SmileOutline" />
<ant-icon type="SmileOutline"></ant-icon>
</view>
</ant-container>
<ant-container title="点击事件">
<view style="display: flex">
<ant-icon
onTap="handleTap"
data-id="icon"
type="SmileOutline"
style="font-size: 50px" />
style="font-size: 50px"
></ant-icon>
</view>
</ant-container>
</ant-container>

View File

@ -1,35 +1,40 @@
<ant-container title="基本用法">
<ant-uploader
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
uploadingText="上传中……"
uploadfailedText="上传失败" />
uploadfailedText="上传失败"
></ant-uploader>
</ant-container>
<ant-container title="初始值">
<ant-uploader
defaultFileList="{{ defaultFileList }}"
defaultFileList="{{defaultFileList}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
onPreview="onPreview" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
onPreview="onPreview"
></ant-uploader>
</ant-container>
<ant-container title="上传最大限制">
限制只能上传1个
<ant-uploader
maxCount="{{ 1 }}"
maxCount="{{1}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
></ant-uploader>
</ant-container>
<ant-container title="自定义移除">
<ant-uploader
defaultFileList="{{ defaultFileList }}"
onRemove="{{ onRemove ? onRemove : 'onRemove' }}"
defaultFileList="{{defaultFileList}}"
onRemove="{{onRemove ? onRemove : 'onRemove'}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
></ant-uploader>
</ant-container>
<ant-container title="自定义上传前">
<ant-uploader
defaultFileList="{{ defaultFileList }}"
onBeforeUpload="{{ onBeforeUpload ? onBeforeUpload : 'onBeforeUpload' }}"
defaultFileList="{{defaultFileList}}"
onBeforeUpload="{{onBeforeUpload ? onBeforeUpload : 'onBeforeUpload'}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
</ant-container>
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
></ant-uploader>
</ant-container>

View File

@ -1,19 +1,22 @@
<ant-container title="受控模式">
<ant-uploader
fileList="{{ fileList }}"
fileList="{{fileList}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
></ant-uploader>
</ant-container>
<ant-container title="手动触发上传">
<ant-uploader
ref="handleUploaderRef"
fileList="{{ fileList }}"
fileList="{{fileList}}"
onChange="onChange"
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
></ant-uploader>
<ant-button
size="medium"
onTap="upload"
type="primary">
type="primary"
>
上传
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,6 +1,6 @@
<view class="base">
<list header="基本使用"></list>
<view class="indexbar">
<index-bar items="{{items}}" />
<index-bar items="{{items}}"></index-bar>
</view>
</view>
</view>

View File

@ -3,15 +3,21 @@
className="indexbar"
items="{{items}}"
defaultCurrent="A"
onChange="onChange">
<view slot-scope="props">
onChange="onChange"
>
<view
slot="$default"
slot-scope="props"
>
<list header="{{props.value.label}}">
<list-item
a:for="{{4}}"
a:for-item="itemX">
a:for-index="index"
a:for-item="itemX"
>
{{props.value.label}}-{{itemX}}
</list-item>
</list>
</view>
</index-bar>
</view>
</view>

View File

@ -1,78 +1,80 @@
<container title="基础用法">
<ant-input
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-input>
</container>
<container title="初始值">
<ant-input
placeholder="请输入内容"
defaultValue="这是antd mini小程序组件"
onChange="onChange" />
onChange="onChange"
></ant-input>
</container>
<container title="带清除按钮">
<ant-input
placeholder="请输入内容"
allowClear />
allowClear
></ant-input>
</container>
<container title="带有前缀后缀">
<ant-input
placeholder="请输入内容"
onChange="onChange"
allowClear>
allowClear
>
<view slot="prefix">¥</view>
<view slot="suffix">RMB</view>
</ant-input>
</container>
<container title="禁用状态">
<ant-input
placeholder="被禁用的输入框"
disabled="{{ true }}" />
disabled="{{true}}"
></ant-input>
</container>
<container title="受控模式">
<ant-input
controlled="{{ true }}"
value="{{ value }}"
controlled="{{true}}"
value="{{value}}"
placeholder="请输入内容"
allowClear
onChange="handleChange" />
onChange="handleChange"
></ant-input>
<ant-button
onTap="clear"
inline
size="small">
size="small"
>
clear
</ant-button>
</container>
<container title="受控模式-输入金额">
<ant-input
placeholder="请输入金额"
value="{{ money }}"
value="{{money}}"
onChange="handleMoney"
type="digit"
className="input money"
focusClassName="border"
allowClear>
allowClear
>
<view slot="prefix">¥</view>
<view slot="suffix">RMB</view>
</ant-input>
</container>
<container title="非受控模式通过ref修改input">
<ant-input
placeholder="请输入内容"
onChange="onChange"
ref="handleRef" />
ref="handleRef"
></ant-input>
<view>
<ant-button
inline
onTap="clearByInputRef">
onTap="clearByInputRef"
>
clear
</ant-button>
</view>
</container>
</container>

View File

@ -2,48 +2,52 @@
<ant-input
className="custom"
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-input>
<ant-input
className="custom"
placeholder="请输入内容"
onChange="onChange">
onChange="onChange"
>
<ant-icon
type="SearchOutline"
slot="prefix" />
slot="prefix"
></ant-icon>
<ant-icon
type="AudioOutline"
slot="suffix" />
slot="suffix"
></ant-icon>
</ant-input>
<ant-textarea
className="custom"
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-textarea>
</container>
<container title="自定义背景颜色">
<ant-input
className="custom-color"
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-input>
<ant-textarea
className="custom-color"
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-textarea>
</container>
<!--微信不支持 placeholderClassName-->
<container title="自定义 placeholderClassName">
<ant-input
placeholderClassName="placeholder"
placeholder="请输入内容"
onChange="onChange" />
onChange="onChange"
></ant-input>
</container>
<container title="自定义 placeholderStyle">
<ant-input
placeholderStyle="color: red;"
placeholder="请输入内容"
onChange="onChange" />
</container>
onChange="onChange"
></ant-input>
</container>

View File

@ -4,17 +4,19 @@
onChange="onChange"
className="search-bar"
focusClassName="search-bar-focus"
confirm-type="search"
confirmType="search"
allowClear
focus
onConfirm="onConfirm">
onConfirm="onConfirm"
>
<ant-icon
slot="prefix"
type="SearchOutline" />
type="SearchOutline"
></ant-icon>
<ant-icon
slot="suffix"
type="AudioOutline" />
type="AudioOutline"
></ant-icon>
</ant-input>
<view class="cancel">取消</view>
</view>
</view>

View File

@ -2,55 +2,58 @@
<ant-textarea
placeholder="请输入内容"
autoHeight
onChange="onChange" />
onChange="onChange"
></ant-textarea>
</ant-container>
<ant-container title="初始值">
<ant-textarea
placeholder="请输入内容"
defaultValue="这是antd mini小程序组件"
autoHeight
onChange="onChange" />
onChange="onChange"
></ant-textarea>
</ant-container>
<ant-container title="带清除按钮">
<ant-textarea
placeholder="请输入内容"
autoHeight
allowClear />
allowClear
></ant-textarea>
</ant-container>
<ant-container title="禁用状态">
<ant-textarea
placeholder="被禁用的输入框"
disabled />
disabled
></ant-textarea>
</ant-container>
<ant-container title="受控模式">
<ant-textarea
value="{{ value }}"
value="{{value}}"
placeholder="请输入内容"
allowClear
onChange="handleChange" />
onChange="handleChange"
></ant-textarea>
<ant-button
onTap="clear"
inline
size="small">
size="small"
>
clear
</ant-button>
</ant-container>
<ant-container title="非受控模式通过ref修改input">
<ant-textarea
placeholder="请输入内容"
allowClear
onChange="onChange"
ref="handleRef" />
ref="handleRef"
></ant-textarea>
<view>
<ant-button
inline
onTap="clearByInputRef">
onTap="clearByInputRef"
>
clear
</ant-button>
</view>
</ant-container>
</ant-container>

View File

@ -1,54 +1,63 @@
<view>
<ant-list
header="基础用法"
radius="{{ radius }}">
radius="{{radius}}"
>
<ant-list-item>1</ant-list-item>
<ant-list-item>2</ant-list-item>
<ant-list-item>3</ant-list-item>
</ant-list>
<ant-list
header="可点击列表"
radius="{{ radius }}">
radius="{{radius}}"
>
<ant-list-item
image="PayCircleOutline"
arrow="right"
onTap="handleTap"
data-info="总资产">
data-info="总资产"
>
总资产
</ant-list-item>
<ant-list-item
image="SetOutline"
arrow="right"
catchTap="catchTap"
data-info="设置">
data-info="设置"
>
设置
</ant-list-item>
<ant-list-item
image="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ"
arrow="right"
onTap="handleTap"
data-info="图片">
data-info="图片"
>
图片
</ant-list-item>
</ant-list>
<ant-list
radius="{{ radius }}"
header="复杂布局">
radius="{{radius}}"
header="复杂布局"
>
<ant-list-item>
圆角
<ant-switch
slot="extra"
checked="{{ radius }}"
onChange="handleSetRadius" />
checked="{{radius}}"
onChange="handleSetRadius"
></ant-switch>
</ant-list-item>
<ant-list-item
extraBrief="未开启"
arrow="right">
arrow="right"
>
大字号模式
</ant-list-item>
<ant-list-item
brief="管理已授权的产品和设备"
arrow="{{ item.arrow }}">
arrow="{{item.arrow}}"
>
授权管理
</ant-list-item>
<ant-list-item
@ -58,30 +67,35 @@
extraBrief="次要辅助信息"
onTap="handleTap"
data-info="三行列表"
arrow="right">
arrow="right"
>
三行列表
<ant-icon
slot="image"
type="AlipaySquareFill"
style="font-size: 64px" />
style="font-size: 64px"
></ant-icon>
</ant-list-item>
</ant-list>
<ant-list
radius="{{ radius }}"
header="禁用状态">
radius="{{radius}}"
header="禁用状态"
>
<ant-list-item
disabled
image="UnorderedListOutline"
arrow="right"
data-info="账单">
data-info="账单"
>
账单
</ant-list-item>
<ant-list-item
disabled
image="PayCircleOutline"
arrow="right"
data-info="总资产">
data-info="总资产"
>
总资产
</ant-list-item>
</ant-list>
</view>
</view>

View File

@ -1,58 +1,64 @@
<ant-container
title="基础用法-spin"
className="container">
className="container"
>
<view class="list">
<ant-loading type="spin" />
<ant-loading type="spin"></ant-loading>
</view>
</ant-container>
<ant-container
title="基础用法-mini"
className="container">
className="container"
>
<view class="list">
<ant-loading type="mini" />
<ant-loading type="mini"></ant-loading>
</view>
</ant-container>
<ant-container
title="spin大小"
className="container">
className="container"
>
<view class="list">
<ant-loading
type="spin"
size="x-large" />
size="x-large"
></ant-loading>
<ant-loading
type="spin"
size="large" />
size="large"
></ant-loading>
<ant-loading
type="spin"
size="medium" />
size="medium"
></ant-loading>
<ant-loading
type="spin"
size="small" />
size="small"
></ant-loading>
</view>
</ant-container>
<ant-container
title="自定义颜色"
className="container">
className="container"
>
<view class="list">
<ant-loading
type="mini"
color="#1677ff" />
<ant-loading color="#1677ff" />
<ant-loading color="#34B368" />
<ant-loading color="#ff8f1f" />
<ant-loading color="#ff0000" />
color="#1677ff"
></ant-loading>
<ant-loading color="#1677ff"></ant-loading>
<ant-loading color="#34B368"></ant-loading>
<ant-loading color="#ff8f1f"></ant-loading>
<ant-loading color="#ff0000"></ant-loading>
</view>
</ant-container>
<ant-container
title="自定义大小"
className="container">
className="container"
>
<view class="list">
<ant-loading style="width: 40px; height: 40px" />
<ant-loading style="width: 30px; height: 30px" />
<ant-loading className="custom-size" />
<ant-loading style="width: 40px; height: 40px"></ant-loading>
<ant-loading style="width: 30px; height: 30px"></ant-loading>
<ant-loading className="custom-size"></ant-loading>
</view>
</ant-container>
</ant-container>

View File

@ -1,146 +1,168 @@
<ant-modal
content="人在天边月上明"
visible="{{ basicVisible }}"
visible="{{basicVisible}}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
onPrimaryButtonTap="handlePrimaryButtonTap"
></ant-modal>
<ant-modal
title="带标题的弹窗"
content="人在天边月上明"
visible="{{ withTitleVisible }}"
visible="{{withTitleVisible}}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
onPrimaryButtonTap="handlePrimaryButtonTap"
></ant-modal>
<ant-modal
title="确定删除吗?"
content="删除后无法恢复"
visible="{{ basicTwoVisible }}"
visible="{{basicTwoVisible}}"
onClose="handleClose"
primaryButtonText="确定"
secondaryButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
onSecondaryButtonTap="handleSecondaryButtonTap"
></ant-modal>
<ant-modal
title="标题"
content="人在天边月上明"
visible="{{ basicThreeVisible }}"
visible="{{basicThreeVisible}}"
onClose="handleClose"
primaryButtonText="主按钮"
secondaryButtonText="更多"
cancelButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap"
onCancelButtonTap="handleCancelButtonTap" />
onCancelButtonTap="handleCancelButtonTap"
></ant-modal>
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
visible="{{ focusOneVisible }}"
visible="{{focusOneVisible}}"
onClose="handleClose"
primaryButtonText="我知道了"
onPrimaryButtonTap="handlePrimaryButtonTap" />
onPrimaryButtonTap="handlePrimaryButtonTap"
></ant-modal>
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
visible="{{ focusTwoVisible }}"
visible="{{focusTwoVisible}}"
onClose="handleClose"
primaryButtonText="我知道了"
secondaryButtonText="辅助操作"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
onSecondaryButtonTap="handleSecondaryButtonTap"
></ant-modal>
<ant-modal
title="强调模式"
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
type="focus"
visible="{{ focusThreeVisible }}"
visible="{{focusThreeVisible}}"
onClose="handleClose"
primaryButtonText="我知道了"
secondaryButtonText="辅助操作"
cancelButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap"
onCancelButtonTap="handleCancelButtonTap" />
onCancelButtonTap="handleCancelButtonTap"
></ant-modal>
<ant-modal
title="确定删除吗?"
content="删除后无法恢复"
visible="{{ customVisible }}"
visible="{{customVisible}}"
onClose="handleClose"
primaryButtonText="删除"
primaryButtonStyle="color:red;"
secondaryButtonText="取消"
onPrimaryButtonTap="handlePrimaryButtonTap"
onSecondaryButtonTap="handleSecondaryButtonTap" />
onSecondaryButtonTap="handleSecondaryButtonTap"
></ant-modal>
<ant-modal
visible="{{ customBodyVisible }}"
onClose="handleClose">
visible="{{customBodyVisible}}"
onClose="handleClose"
>
<view class="body">
<image
mode="scaleToFill"
src="https://mdn.alipayobjects.com/huamei_yujk1o/afts/img/A*xYjqRJiKsvoAAAAAAAAAAAAADuaJAQ/original"
class="bodyImg" />
class="bodyImg"
></image>
<view class="bodyAction">
<ant-icon
type="CloseCircleOutline"
onTap="handleClose" />
onTap="handleClose"
></ant-icon>
</view>
</view>
</ant-modal>
<ant-container
title="基础用法"
className="list">
className="list"
>
<ant-button
data-field="basicVisible"
onTap="handleOpen">
onTap="handleOpen"
>
最简单的弹框
</ant-button>
<ant-button
data-field="withTitleVisible"
onTap="handleOpen">
onTap="handleOpen"
>
带有标题
</ant-button>
<ant-button
data-field="basicTwoVisible"
onTap="handleOpen">
onTap="handleOpen"
>
带辅助按钮
</ant-button>
<ant-button
data-field="basicThreeVisible"
onTap="handleOpen">
onTap="handleOpen"
>
带辅助和取消按钮
</ant-button>
</ant-container>
<ant-container
title="强调模式"
className="list">
className="list"
>
<ant-button
data-field="focusOneVisible"
onTap="handleOpen">
onTap="handleOpen"
>
只有主按钮
</ant-button>
<ant-button
data-field="focusTwoVisible"
onTap="handleOpen">
onTap="handleOpen"
>
带辅助按钮
</ant-button>
<ant-button
data-field="focusThreeVisible"
onTap="handleOpen">
onTap="handleOpen"
>
带辅助和取消按钮
</ant-button>
</ant-container>
<ant-container
title="自定义"
className="list">
className="list"
>
<ant-button
data-field="customVisible"
onTap="handleOpen">
onTap="handleOpen"
>
自定义按钮样式
</ant-button>
<ant-button
data-field="customBodyVisible"
onTap="handleOpen">
onTap="handleOpen"
>
完全自定义内容区
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,89 +1,93 @@
<ant-container title="基础用法">
<block
a:for="{{ typeList }}"
a:for="{{typeList}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<ant-notice
style="margin-bottom: 8px"
type="{{ item }}">
{{ item }}
type="{{item}}"
>
{{item}}
</ant-notice>
</block>
</ant-container>
<ant-container title="可关闭通告栏">
<ant-notice
onTap="handleClose"
mode="closeable">
mode="closeable"
>
这条通知可以关闭
</ant-notice>
</ant-container>
<ant-container title="可滚动通告栏">
<block
a:for="{{ typeList }}"
a:for="{{typeList}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<ant-notice
type="{{ item }}"
type="{{item}}"
style="margin-bottom: 8px"
enableMarquee="{{ true }}"
loop="{{ true }}"
enableMarquee="{{true}}"
loop="{{true}}"
onTap="handleTapLink"
mode="link">
mode="link"
>
文本溢出时,开启循环滚动。文字不够继续添加文字凑数。
</ant-notice>
</block>
</ant-container>
<ant-container title="可滚动通告栏(不循环)">
<block
a:for="{{ typeList }}"
a:for="{{typeList}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<ant-notice
type="{{ item }}"
type="{{item}}"
style="margin-bottom: 8px"
enableMarquee="{{ true }}"
enableMarquee="{{true}}"
onTap="handleTapLink"
mode="link">
mode="link"
>
文本溢出时,开启循环滚动。文字不够继续添加文字凑数。
</ant-notice>
</block>
</ant-container>
<ant-container title="自定义通告栏">
<ant-notice style="margin-bottom: 8px">
不展示图标
<view slot="icon" />
<view slot="icon"></view>
</ant-notice>
<ant-notice
type="primary"
icon="GlobalOutline"
style="margin-bottom: 8px"
mode="link">
mode="link"
>
自定义左侧图标
</ant-notice>
<ant-notice
type="primary"
icon="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ"
style="margin-bottom: 8px"
mode="link">
mode="link"
>
自定义左侧图标图片
</ant-notice>
<ant-notice
mode="link"
style="margin-bottom: 8px"
onTap="handleTapLink">
onTap="handleTapLink"
>
自定义右侧按钮
<view
slot="extra"
class="extra">
class="extra"
>
<view onTap="handleTapAction">不再提示</view>
<view onTap="handleTapAction">查看详情</view>
</view>
</ant-notice>
</ant-container>
</ant-container>

View File

@ -1,54 +1,58 @@
<ant-list header="基础使用">
<ant-list-item onTap="onTap">默认键盘</ant-list-item>
<ant-number-keyboard
visible="{{ visible }}"
onClose="onTap" />
visible="{{visible}}"
onClose="onTap"
></ant-number-keyboard>
<ant-list-item onTap="onTap1">没有小数点</ant-list-item>
<ant-number-keyboard
point="{{ false }}"
visible="{{ visible1 }}"
onClose="onTap1" />
point="{{false}}"
visible="{{visible1}}"
onClose="onTap1"
></ant-number-keyboard>
<ant-list-item onTap="onTap2">带确认按钮</ant-list-item>
<ant-number-keyboard
confirmText="确认"
visible="{{ visible2 }}"
onClose="onTap2" />
visible="{{visible2}}"
onClose="onTap2"
></ant-number-keyboard>
<ant-list-item onTap="onTap3">带关闭箭头</ant-list-item>
<ant-number-keyboard
closeable="{{ true }}"
visible="{{ visible3 }}"
onClose="onTap3" />
closeable="{{true}}"
visible="{{visible3}}"
onClose="onTap3"
></ant-number-keyboard>
<ant-list-item onTap="onTap4">乱序键盘</ant-list-item>
<ant-number-keyboard
random="{{ true }}"
visible="{{ visible4 }}"
onClose="onTap4" />
random="{{true}}"
visible="{{visible4}}"
onClose="onTap4"
></ant-number-keyboard>
</ant-list>
<ant-list header="自定义按钮">
<ant-list-item onTap="onTap6">自定义标题</ant-list-item>
<ant-number-keyboard
visible="{{ visible6 }}"
onClose="onTap6">
visible="{{visible6}}"
onClose="onTap6"
>
<view
slot="header"
class="number-keyboard-header">
class="number-keyboard-header"
>
支付宝安全键盘
</view>
</ant-number-keyboard>
<ant-list-item onTap="onTap7">自定义确认按钮</ant-list-item>
<ant-number-keyboard
confirmText="确认"
visible="{{ visible7 }}"
onClose="onTap7">
visible="{{visible7}}"
onClose="onTap7"
>
<view
slot="confirm"
class="number-keyboard-confirm">
<ant-icon type="DownOutline" />
class="number-keyboard-confirm"
>
<ant-icon type="DownOutline"></ant-icon>
</view>
</ant-number-keyboard>
</ant-list>
</ant-list>

View File

@ -1,26 +1,28 @@
<list header="数字键盘示例: 金额输入">
<list-item>
<view
class="number-content {{ value ? '' : 'number-placeholder' }}"
catchTap="onAmountFocus">
<!-- display: inline -->
<text a:if="{{ value }}">{{ value }}</text>
<!-- display: inline -->
class="number-content {{value ? '' : 'number-placeholder'}}"
catchTap="onAmountFocus"
>
<!--display: inline-->
<text a:if="{{value}}">{{value}}</text>
<!--display: inline-->
<text
a:else
class="number-content-tip"
>0.00</text
>
>0.00</text>
<view
a:if="{{ visible }}"
a:if="{{visible}}"
class="number-light"
style="position: {{ value ? 'static' : 'absolute' }}" />
style="position: {{value ? 'static' : 'absolute'}}"
></view>
</view>
</list-item>
<number-keyboard
visible="{{ visible }}"
closeable="{{ true }}"
value="{{ value }}"
visible="{{visible}}"
closeable="{{true}}"
value="{{value}}"
onChange="onChange"
onClose="onClose" />
</list>
onClose="onClose"
></number-keyboard>
</list>

View File

@ -2,26 +2,29 @@
<list-item>
<view
class="number-code"
catchTap="onCodeFocus">
catchTap="onCodeFocus"
>
<block
a:for="{{ 4 }}"
a:for="{{4}}"
a:for-index="index"
a:for-item="item">
<view
class="number-code-view {{ visible && value.length === index ? 'number-code-border' : '' }}">
{{ value[index] || '' }}
a:for-item="item"
>
<view class="number-code-view {{visible && value.length === index ? 'number-code-border' : ''}}">
{{value[index] || ''}}
<view
a:if="{{ visible && value.length === index }}"
class="number-code-tip" />
a:if="{{visible && value.length === index}}"
class="number-code-tip"
></view>
</view>
</block>
</view>
</list-item>
<number-keyboard
visible="{{ visible }}"
point="{{ false }}"
closeable="{{ true }}"
value="{{ value }}"
visible="{{visible}}"
point="{{false}}"
closeable="{{true}}"
value="{{value}}"
onChange="onChange"
onClose="onClose" />
</list>
onClose="onClose"
></number-keyboard>
</list>

View File

@ -1,27 +1,29 @@
<list header="数字输入框示例">
<list-item>
<view
class="number-content {{ value ? '' : 'number-placeholder' }}"
catchTap="onNumberFocus">
<!-- display: inline -->
<text a:if="{{ value }}">{{ value }}</text>
<!-- display: inline -->
class="number-content {{value ? '' : 'number-placeholder'}}"
catchTap="onNumberFocus"
>
<!--display: inline-->
<text a:if="{{value}}">{{value}}</text>
<!--display: inline-->
<text
a:else
class="number-content-tip"
>0.00</text
>
>0.00</text>
<view
a:if="{{ visible }}"
a:if="{{visible}}"
class="number-light"
style="{{ value ? 'position: static;' : 'position: absolute;' }}" />
style="{{value ? 'position: static;' : 'position: absolute;'}}"
></view>
</view>
</list-item>
<number-keyboard
visible="{{ visible }}"
point="{{ false }}"
closeable="{{ true }}"
value="{{ value }}"
visible="{{visible}}"
point="{{false}}"
closeable="{{true}}"
value="{{value}}"
onChange="onChange"
onClose="onClose" />
</list>
onClose="onClose"
></number-keyboard>
</list>

View File

@ -108,5 +108,8 @@
>
正常
</ant-button>
<ant-loading slot="loading" color="#999" />
</ant-page>
<ant-loading
slot="loading"
color="#999"
></ant-loading>
</ant-page>

View File

@ -6,12 +6,13 @@
onCancel="handleDismissPicker"
onVisibleChange="handleTriggerPicker"
onOk="handleOk"
defaultValue="{{ defaultValue }}"
defaultValue="{{defaultValue}}"
placeholder="请选择"
title="请选择"
onChange="handleChange"
options="{{ list }}"
emptyText="暂无数据" />
options="{{list}}"
emptyText="暂无数据"
></ant-picker>
</ant-list-item>
<ant-list-item>
选择城市(点击蒙层不关闭)
@ -20,12 +21,13 @@
onCancel="handleDismissPicker"
onVisibleChange="handleTriggerPicker"
onOk="handleOk"
defaultValue="{{ defaultValue }}"
defaultValue="{{defaultValue}}"
placeholder="请选择"
title="请选择"
onChange="handleChange"
maskClosable="{{ false }}"
options="{{ list }}" />
maskClosable="{{false}}"
options="{{list}}"
></ant-picker>
</ant-list-item>
</ant-list>
<ant-list header="受控模式">
@ -34,21 +36,24 @@
<ant-picker
slot="extra"
onOk="handleControlledOk"
value="{{ value }}"
value="{{value}}"
placeholder="请选择"
title="请选择"
options="{{ list }}" />
options="{{list}}"
></ant-picker>
</ant-list-item>
<view class="btn-wrapper">
<ant-button
inline
onTap="handleChangeControlled"
style="margin-right: 8px">
style="margin-right: 8px"
>
选择深圳
</ant-button>
<ant-button
inline
onTap="handleClearControlled">
onTap="handleClearControlled"
>
清空
</ant-button>
</view>
@ -64,10 +69,10 @@
placeholder="请选择"
title="请选择"
onChange="handleChange"
options="{{ weekList }}" />
options="{{weekList}}"
></ant-picker>
</ant-list-item>
</ant-list>
<ant-list header="多列复杂类型数据">
<ant-list-item>
请选择时间
@ -78,32 +83,33 @@
defaultValue="{{['Tues', 'pm']}}"
title="请选择"
onOk="handleOk"
onFormat="{{ formatTime ? formatTime : 'formatTime' }}"
options="{{ columns }}" />
onFormat="{{formatTime ? formatTime : 'formatTime'}}"
options="{{columns}}"
></ant-picker>
</ant-list-item>
</ant-list>
<ant-container style="margin-top: 20rpx">
<ant-list header="多列复杂类型数据">
<ant-list-item>
请选择时间
<ant-picker
slot="extra"
visible="{{ pickerVisible }}"
visible="{{pickerVisible}}"
placeholder="请选择"
onVisibleChange="handleTriggerControlledPicker"
defaultValue="{{['Tues', 'pm']}}"
title="请选择"
onOk="handleOk"
onFormat="{{ formatTime ? formatTime : 'formatTime' }}"
options="{{ columns }}" />
onFormat="{{formatTime ? formatTime : 'formatTime'}}"
options="{{columns}}"
></ant-picker>
</ant-list-item>
</ant-list>
<ant-button
size="medium"
type="primary"
onTap="handleOpenPicker">
onTap="handleOpenPicker"
>
打开 Picker
</ant-button>
</ant-container>
</ant-container>

View File

@ -1,98 +1,102 @@
<container title="基础用法">
<popover
content="prompt"
style="display: inline-block">
style="display: inline-block"
>
<ant-button
size="small"
inline>
inline
>
点我
</ant-button>
</popover>
</container>
<container title="基础用法-回调函数">
<popover
content="prompt"
placement="top"
onVisibleChange="onVisibleChange">
onVisibleChange="onVisibleChange"
>
<ant-button>点我</ant-button>
</popover>
</container>
<container title="自定义颜色">
<view class="custom">
<popover
content="红色"
color="red">
<!-- display: inline -->
color="red"
>
<!--display: inline-->
<text>点我红色</text>
</popover>
<popover
content="蓝色"
color="blue">
<!-- display: inline -->
color="blue"
>
<!--display: inline-->
<text>点我蓝色</text>
</popover>
</view>
</container>
<container title="点击icon查看">
查看说明
<popover
content="说明"
style="display: inline-block">
<icon type="QuestionCircleOutline" />
style="display: inline-block"
>
<icon type="QuestionCircleOutline"></icon>
</popover>
</container>
<container title="自定义位置">
<view class="custom">
<block
a:for="{{ placements }}"
a:for="{{placements}}"
a:for-index="index"
a:for-item="item">
<popover placement="{{ item }}">
a:for-item="item"
>
<popover placement="{{item}}">
<ant-button
size="small"
inline
className="custom-child">
className="custom-child"
>
<view>点我</view>
{{ item }}
{{item}}
</ant-button>
<view
slot="content"
class="content">
{{ item }}
class="content"
>
{{item}}
</view>
</popover>
</block>
</view>
</container>
<container title="自定义mask">
<popover
content="prompt"
maskStyle="background: rgba(0, 0, 0, 0.6);"
style="display: inline-block">
style="display: inline-block"
>
<ant-button
size="small"
inline>
inline
>
点我
</ant-button>
</popover>
</container>
<container title="受控">
<view>
<popover
content="prompt"
placement="right"
showMask="{{ false }}"
visible="{{ visible }}"
style="display: inline-block">
<!-- display: inline -->
showMask="{{false}}"
visible="{{visible}}"
style="display: inline-block"
>
<!--display: inline-->
<text>点击按钮修改visible</text>
</popover>
</view>
@ -100,7 +104,8 @@
size="small"
inline
onTap="handleVisibleChange"
style="margin-top: 8px">
style="margin-top: 8px"
>
change visible
</ant-button>
</container>
</container>

View File

@ -1,34 +1,38 @@
<popover
placement="bottom-right"
visible="{{ visible }}"
visible="{{visible}}"
style="display: inline-block; margin: 20px"
onVisibleChange="handleVisibleChange"
color="#fff">
color="#fff"
>
<ant-button inline>点我</ant-button>
<list
slot="content"
className="popover">
className="popover"
>
<list-item
onTap="handleTapItem"
image="ScanningOutline">
image="ScanningOutline"
>
扫一扫
</list-item>
<list-item
onTap="handleTapItem"
image="ReceivePaymentOutline">
image="ReceivePaymentOutline"
>
付钱/收钱
</list-item>
<list-item
onTap="handleTapItem"
image="TransportQRcodeOutline">
image="TransportQRcodeOutline"
>
乘车码
</list-item>
<list-item
onTap="handleTapItem"
image="{{ url }}">
image="{{url}}"
>
图片
</list-item>
</list>
</popover>
</popover>

View File

@ -1,38 +1,43 @@
<ant-popup
visible="{{ basicVisible }}"
height="{{ 250 }}"
width="{{ 250 }}"
position="{{ position }}"
animation="{{ animation }}"
onClose="handlePopupClose">
visible="{{basicVisible}}"
height="{{250}}"
width="{{250}}"
position="{{position}}"
animation="{{animation}}"
onClose="handlePopupClose"
>
<view style="padding: 12px">
从屏幕滑出或弹出一块自定义内容区,用于展示弹窗、信息提示、选择输入、切换等内容。
</view>
</ant-popup>
<ant-popup
visible="{{ closeVisible }}"
height="{{ 250 }}"
visible="{{closeVisible}}"
height="{{250}}"
position="bottom"
animation="{{ animation }}"
onClose="handlePopupClose">
animation="{{animation}}"
onClose="handlePopupClose"
>
<view style="padding: 12px">
从屏幕滑出或弹出一块自定义内容区,用于展示弹窗、信息提示、选择输入、切换等内容。
</view>
<ant-icon
style="position: absolute; right: 12px; top: 12px"
type="CloseOutline"
onTap="handlePopupClose" />
onTap="handlePopupClose"
></ant-icon>
</ant-popup>
<ant-popup
visible="{{ scrollVisible }}"
visible="{{scrollVisible}}"
position="bottom"
animation="{{ animation }}"
onClose="handlePopupClose">
animation="{{animation}}"
onClose="handlePopupClose"
>
<scroll-view
scroll-y
scrollY
style="padding: 12px; height: 300px"
disable-lower-scroll="out-of-bounds"
disable-upper-scroll="out-of-bounds">
disableLowerScroll="out-of-bounds"
disableUpperScroll="out-of-bounds"
>
Ea consectetur ipsum consequat exercitation laboris excepteur pariatur
excepteur labore dolor cillum tempor esse. Ad adipisicing nostrud fugiat eu
mollit. Proident nisi voluptate sunt ea laboris Lorem ullamco deserunt aute
@ -96,25 +101,30 @@
</ant-popup>
<container
title="弹出位置"
className="list">
className="list"
>
<ant-button
data-position="top"
onTap="handleShowBasic">
onTap="handleShowBasic"
>
顶部弹出
</ant-button>
<ant-button
data-position="bottom"
onTap="handleShowBasic">
onTap="handleShowBasic"
>
底部弹出
</ant-button>
<ant-button
data-position="left"
onTap="handleShowBasic">
onTap="handleShowBasic"
>
左侧弹出
</ant-button>
<ant-button
data-position="right"
onTap="handleShowBasic">
onTap="handleShowBasic"
>
右侧弹出
</ant-button>
<ant-button onTap="handleShowClose">自定义弹窗内关闭</ant-button>
@ -125,7 +135,8 @@
开启过渡动画
<switch
slot="extra"
checked="{{ animation }}"
onChange="handleChangeAnimation" />
checked="{{animation}}"
onChange="handleChangeAnimation"
></switch>
</list-item>
</list>
</list>

View File

@ -2,81 +2,90 @@
<view class="line2">
<progress
type="circle"
percent="{{ percent1 }}" />
percent="{{percent1}}"
></progress>
<progress
type="circle"
percent="{{ percent1 }}"
animation="{{ false }}" />
percent="{{percent1}}"
animation="{{false}}"
></progress>
</view>
<view class="buttonwrapper">
<ant-button
inline
style="margin-right: 16rpx"
onTap="handleDelete">
onTap="handleDelete"
>
减少
</ant-button>
<ant-button
inline
onTap="handleAdd">
onTap="handleAdd"
>
增加
</ant-button>
</view>
</container>
<container title="自定义进度条宽度">
<view class="line2">
<progress
type="circle"
percent="{{ percent2 }}"
strokeWidth="{{ 12 }}" />
percent="{{percent2}}"
strokeWidth="{{12}}"
></progress>
<progress
type="circle"
percent="{{ percent2 }}"
strokeWidth="{{ 2 }}" />
percent="{{percent2}}"
strokeWidth="{{2}}"
></progress>
</view>
</container>
<container title="自定义颜色">
<view class="line2">
<progress
type="circle"
percent="{{ percent3 }}"
strokeColor="#00B578" />
percent="{{percent3}}"
strokeColor="#00B578"
></progress>
<progress
type="circle"
percent="{{ percent3 }}"
strokeColor="#FF8F1F" />
percent="{{percent3}}"
strokeColor="#FF8F1F"
></progress>
</view>
</container>
<container title="自定义提示文案">
<view class="line2">
<progress
type="circle"
percent="{{ percent5 }}">
<view slot="indicator">{{ percent5 }}GB</view>
percent="{{percent5}}"
>
<view slot="indicator">{{percent5}}GB</view>
</progress>
<progress
type="circle"
percent="{{ percent5 }}">
<view slot="indicator">{{ percent5 }}步</view>
percent="{{percent5}}"
>
<view slot="indicator">{{percent5}}步</view>
</progress>
</view>
</container>
<container title="自定义大小">
<view class="line2">
<progress
type="circle"
percent="{{ percent5 }}"
width="{{ 80 }}" />
percent="{{percent5}}"
width="{{80}}"
></progress>
<progress
type="circle"
percent="{{ percent5 }}"
width="{{ 100 }}" />
percent="{{percent5}}"
width="{{100}}"
></progress>
<progress
type="circle"
percent="{{ percent5 }}"
width="{{ 120 }}" />
percent="{{percent5}}"
width="{{120}}"
></progress>
</view>
</container>
</container>

View File

@ -1,62 +1,67 @@
<container title="控制进度">
<progress percent="{{ progress1 }}" />
<progress percent="{{progress1}}"></progress>
<view class="buttonwrapper">
<ant-button
size="small"
inline
style="margin-right: 16rpx"
onTap="handleDelete">
onTap="handleDelete"
>
减少
</ant-button>
<ant-button
size="small"
inline
onTap="handleAdd">
onTap="handleAdd"
>
增加
</ant-button>
</view>
</container>
<container title="语义进度条">
<progress
status="success"
percent="100" />
percent="100"
></progress>
<progress
status="exception"
percent="50" />
percent="50"
></progress>
</container>
<container title="自定义进度条高度">
<progress
percent="{{ progress2 }}"
strokeWidth="15" />
percent="{{progress2}}"
strokeWidth="15"
></progress>
</container>
<container title="自定义颜色样式">
<progress
percent="{{ progress4 }}"
trailColor="#FFCF9F" />
percent="{{progress4}}"
trailColor="#FFCF9F"
></progress>
<progress
percent="{{ progress4 }}"
strokeColor="#FFCF9F" />
<progress percent="{{ progress4 }}" />
percent="{{progress4}}"
strokeColor="#FFCF9F"
></progress>
<progress percent="{{progress4}}"></progress>
</container>
<container title="自定义长度">
<progress
percent="{{ progress4 }}"
style="width: 100%" />
percent="{{progress4}}"
style="width: 100%"
></progress>
<progress
percent="{{ progress4 }}"
style="width: 70%" />
percent="{{progress4}}"
style="width: 70%"
></progress>
<progress
percent="{{ progress4 }}"
style="width: 50%" />
percent="{{progress4}}"
style="width: 50%"
></progress>
</container>
<container title="自定义进度条指示器">
<progress percent="{{ progress3 }}">
<!-- display: inline -->
<text slot="indicator">{{ (progress3 / 100) * 200 }}步</text>
<progress percent="{{progress3}}">
<!--display: inline-->
<text slot="indicator">{{progress3 / 100 * 200}}步</text>
</progress>
</container>
</container>

View File

@ -1,32 +1,31 @@
<container title="基础用法">
<radio onChange="onChange">Radio</radio>
</container>
<container title="初始值">
<radio defaultChecked="{{ true }}">Radio</radio>
<radio defaultChecked="{{true}}">Radio</radio>
</container>
<container title="禁用模式">
<radio disabled>Radio1</radio>
<radio
defaultChecked
disabled>
disabled
>
Radio2
</radio>
</container>
<container title="自定义颜色">
<radio
color="red"
defaultChecked>
defaultChecked
>
Radio
</radio>
</container>
<container title="控制模式">
<radio
checked="{{ checked }}"
onChange="handleChange">
checked="{{checked}}"
onChange="handleChange"
>
Radio
</radio>
</container>
</container>

View File

@ -1,48 +1,49 @@
<ant-container title="基础用法">
<ant-radio-group
options="{{ options }}"
onChange="onChange" />
options="{{options}}"
onChange="onChange"
></ant-radio-group>
</ant-container>
<ant-container title="初始值">
<ant-radio-group
defaultValue="banana"
options="{{ options }}"
onChange="onChange" />
options="{{options}}"
onChange="onChange"
></ant-radio-group>
</ant-container>
<ant-container title="横向布局">
<ant-radio-group
options="{{ options }}"
position="horizontal" />
options="{{options}}"
position="horizontal"
></ant-radio-group>
</ant-container>
<ant-container title="禁用模式-所有禁用">
<ant-radio-group
options="{{ options }}"
disabled />
options="{{options}}"
disabled
></ant-radio-group>
</ant-container>
<ant-container title="禁用模式-其中有的禁用">
<ant-radio-group options="{{ optionsWithDisabled }}" />
<ant-radio-group options="{{optionsWithDisabled}}"></ant-radio-group>
</ant-container>
<ant-container title="控制模式">
<ant-radio-group
value="{{ value }}"
options="{{ options }}"
onChange="handleChange" />
value="{{value}}"
options="{{options}}"
onChange="handleChange"
></ant-radio-group>
</ant-container>
<ant-container title="自定义">
<ant-radio-group
options="{{ options }}"
options="{{options}}"
color="red"
defaultValue="banana">
defaultValue="banana"
>
<view
slot="label"
slot-scope="item">
{{ item.index + 1 }} {{ item.value.label }}
slot-scope="item"
>
{{item.index + 1}} {{item.value.label}}
</view>
</ant-radio-group>
</ant-container>
</ant-container>

View File

@ -2,37 +2,36 @@
<container title="姓名">
<ant-input
placeholder="请输入姓名"
value="{{ value }}"
onChange="onInputChange">
value="{{value}}"
onChange="onInputChange"
>
<view
slot="suffix"
class="tips"
onTap="onTap">
onTap="onTap"
>
生僻字?
</view>
</ant-input>
</container>
<list-item onTap="onTap">默认键盘</list-item>
<rare-words-keyboard
visible="{{ visible }}"
visible="{{visible}}"
onClose="onClose"
onChange="onChange" />
onChange="onChange"
></rare-words-keyboard>
<list-item onTap="onTap2">不带蒙层</list-item>
<rare-words-keyboard
visible="{{ visible2 }}"
showMask="{{ false }}"
visible="{{visible2}}"
showMask="{{false}}"
onClose="onClose2"
onChange="onChange" />
onChange="onChange"
></rare-words-keyboard>
<list-item onTap="onTap3">监听输入完成、出错的回调</list-item>
<rare-words-keyboard
visible="{{ visible3 }}"
visible="{{visible3}}"
onClose="onClose3"
onChange="onChange"
onError="onKeyBoardError" />
</list>
onError="onKeyBoardError"
></rare-words-keyboard>
</list>

View File

@ -1,58 +1,60 @@
<ant-container title="基础用法">
<ant-rate
defaultValue="{{ 3 }}"
onChange="onChange" />
defaultValue="{{3}}"
onChange="onChange"
></ant-rate>
</ant-container>
<ant-container title="半星">
<ant-rate
defaultValue="{{ 3.5 }}"
defaultValue="{{3.5}}"
allowHalf
onChange="onChange" />
onChange="onChange"
></ant-rate>
</ant-container>
<ant-container title="清除">
<ant-rate
defaultValue="{{ 4 }}"
onChange="onChange" />
defaultValue="{{4}}"
onChange="onChange"
></ant-rate>
<view class="description">allowClear: true</view>
<ant-rate
defaultValue="{{ 4 }}"
allowClear="{{ false }}"
onChange="onChange" />
defaultValue="{{4}}"
allowClear="{{false}}"
onChange="onChange"
></ant-rate>
<view class="description">allowClear: false</view>
</ant-container>
<ant-container title="只读">
<ant-rate
defaultValue="{{ 3.5 }}"
readonly />
defaultValue="{{3.5}}"
readonly
></ant-rate>
</ant-container>
<ant-container title="多个count">
<ant-rate
defaultValue="{{ 5 }}"
count="{{ 8 }}" />
defaultValue="{{5}}"
count="{{8}}"
></ant-rate>
</ant-container>
<ant-container title="受控模式">
<view style="display: flex; justify-content: space-around">
<view>
<ant-rate
value="{{ value }}"
onChange="handleChange" />
value="{{value}}"
onChange="handleChange"
></ant-rate>
<view style="margin-top: 8px">
<ant-stepper
value="{{ value }}"
min="{{ 0 }}"
max="{{ 5 }}"
onChange="handleChange" />
value="{{value}}"
min="{{0}}"
max="{{5}}"
onChange="handleChange"
></ant-stepper>
</view>
</view>
<view>
<ant-rate value="{{ value }}" />
<ant-rate value="{{value}}"></ant-rate>
<view class="description">无 onChange 函数</view>
</view>
</view>
</ant-container>
</ant-container>

View File

@ -1,84 +1,87 @@
<ant-container title="自定义间距">
<ant-rate
defaultValue="{{ 3 }}"
gutter="{{ 8 }}" />
defaultValue="{{3}}"
gutter="{{8}}"
></ant-rate>
<view class="description">8px</view>
<ant-rate
defaultValue="{{ 4 }}"
gutter="{{ 16 }}" />
defaultValue="{{4}}"
gutter="{{16}}"
></ant-rate>
<view class="description">16px</view>
</ant-container>
<ant-container title="自定义大小">
<ant-rate
defaultValue="{{ 3 }}"
className="rate" />
defaultValue="{{3}}"
className="rate"
></ant-rate>
<view class="description">30px</view>
<ant-rate
defaultValue="{{ 3 }}"
style="font-size: 40px" />
defaultValue="{{3}}"
style="font-size: 40px"
></ant-rate>
<view class="description">40px</view>
</ant-container>
<ant-container title="自定义颜色">
<ant-rate
defaultValue="{{ 3 }}"
defaultValue="{{3}}"
characterClassName="star"
characterActiveClassName="star-active" />
characterActiveClassName="star-active"
></ant-rate>
<view class="description">基础</view>
<ant-rate
defaultValue="{{ 3 }}"
defaultValue="{{3}}"
characterClassName="star-gradient"
characterActiveClassName="star-active-gradient" />
characterActiveClassName="star-active-gradient"
></ant-rate>
<view class="description">渐变</view>
</ant-container>
<ant-container title="自定义图标">
<ant-rate defaultValue="{{ 3 }}">
<ant-rate defaultValue="{{3}}">
<ant-icon
slot="character"
type="HeartFill" />
type="HeartFill"
></ant-icon>
</ant-rate>
<view class="description">自定义为HeartFill</view>
<ant-rate
defaultValue="{{ 3.5 }}"
allowHalf>
defaultValue="{{3.5}}"
allowHalf
>
<ant-icon
slot="character"
type="StarOutline" />
type="StarOutline"
></ant-icon>
</ant-rate>
<view class="description">自定义为StarOutline</view>
<ant-rate
defaultValue="{{ 3.5 }}"
defaultValue="{{3.5}}"
allowHalf
characterClassName="character">
characterClassName="character"
>
<view slot="character">正</view>
</ant-rate>
<view class="description">自定义为正</view>
<ant-rate
defaultValue="{{ 2.5 }}"
defaultValue="{{2.5}}"
allowHalf
characterClassName="character">
characterClassName="character"
>
<view slot="character">A</view>
</ant-rate>
<view class="description">自定义为A</view>
<ant-rate
defaultValue="{{ 2.5 }}"
defaultValue="{{2.5}}"
allowHalf
gutter="{{ 20 }}"
characterClassName="character">
gutter="{{20}}"
characterClassName="character"
>
<view
slot="character"
slot-scope="rate">
{{ rate.index }}
slot-scope="rate"
>
{{rate.index}}
</view>
</ant-rate>
<view class="description">自定义为索引</view>
</ant-container>
</ant-container>

View File

@ -2,40 +2,39 @@
<result
title="操作成功"
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
type="success" />
type="success"
></result>
</container>
<container title="等待状态">
<result
title="等待处理"
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
type="wait" />
type="wait"
></result>
</container>
<container title="提示状态">
<result
title="信息提示"
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
type="info" />
type="info"
></result>
</container>
<container title="警告状态">
<result
title="警告提示"
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
type="warning" />
type="warning"
></result>
</container>
<container title="失败状态">
<result
title="无法完成操作"
message="内容详情可折行,建议不超过两行\n建议不超过两行建议不超过两行"
type="error" />
type="error"
></result>
</container>
<container title="自定义">
<result
image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">
<result image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">
<view slot="title">标题插槽</view>
<view slot="message">描述插槽</view>
<view slot="extra">
@ -43,9 +42,10 @@
<button
type="primary"
inline
style="margin-left: 12px">
style="margin-left: 12px"
>
主要操作
</button>
</view>
</result>
</container>
</container>

View File

@ -1,61 +1,62 @@
<ant-container title="单选">
<ant-selector options="{{ items1 }}" />
<ant-selector options="{{items1}}"></ant-selector>
</ant-container>
<ant-container title="单选-选项带有副标题">
<ant-selector
defaultValue="2"
options="{{ items2 }}" />
options="{{items2}}"
></ant-selector>
</ant-container>
<ant-container title="多选">
<ant-selector
defaultValue="{{ ['1', '2'] }}"
options="{{ items1 }}"
multiple />
defaultValue="{{['1', '2']}}"
options="{{items1}}"
multiple
></ant-selector>
</ant-container>
<ant-container title="多选 (最少选 2 个 最多选 4 个)">
<ant-selector
defaultValue="{{ ['1'] }}"
options="{{ items1 }}"
defaultValue="{{['1']}}"
options="{{items1}}"
multiple
maxSelectedCount="{{ 4 }}"
minSelectedCount="{{ 2 }}"
onSelectMax="onSelectMax" />
maxSelectedCount="{{4}}"
minSelectedCount="{{2}}"
onSelectMax="onSelectMax"
></ant-selector>
</ant-container>
<ant-container title="全禁用">
<ant-selector
value="{{ ['1', '2'] }}"
options="{{ items1 }}"
value="{{['1', '2']}}"
options="{{items1}}"
disabled
multiple />
multiple
></ant-selector>
</ant-container>
<ant-container title="部分禁用">
<ant-selector
defaultValue="{{ ['1', '2'] }}"
options="{{ items3 }}"
multiple />
defaultValue="{{['1', '2']}}"
options="{{items3}}"
multiple
></ant-selector>
</ant-container>
<ant-container title="受控模式">
<ant-selector
value="{{ value }}"
options="{{ items1 }}"
onChange="handleChange" />
value="{{value}}"
options="{{items1}}"
onChange="handleChange"
></ant-selector>
<ant-button
size="large"
onTap="handleChangeValue">
onTap="handleChangeValue"
>
改变选中值为选项三
</ant-button>
</ant-container>
<ant-container title="单选-不允许清空">
<ant-selector
defaultValue="1"
minSelectedCount="{{ 1 }}"
minSelectedCount="{{1}}"
onSelectMin="onSelectMin"
options="{{ items1 }}" />
</ant-container>
options="{{items1}}"
></ant-selector>
</ant-container>

View File

@ -1,33 +1,39 @@
<view class="filterDemo">
<view class="filterDemo-bar">
<block
a:for="{{ items }}"
a:for="{{items}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<view
class="filterDemo-bar-item {{ currentOpen === index ? 'filterDemo-bar-item-active' : '' }}"
class="filterDemo-bar-item {{currentOpen === index ? 'filterDemo-bar-item-active' : ''}}"
onTap="onTapItem"
data-index="{{ index }}">
{{ item.title }}
data-index="{{index}}"
>
{{item.title}}
<ant-icon
type="DownFill"
className="filterDemo-bar-item-icon {{ currentOpen === index ? 'filterDemo-bar-item-icon-up' : '' }}" />
className="filterDemo-bar-item-icon {{currentOpen === index ? 'filterDemo-bar-item-icon-up' : ''}}"
></ant-icon>
</view>
</block>
</view>
<view class="filterDemo-items">
<block
a:for="{{ items }}"
a:for="{{items}}"
a:for-index="index"
a:for-item="item">
a:for-item="item"
>
<view
class="filterDemo-items-content {{ currentOpen === index ? 'filterDemo-items-content-active' : '' }} {{ contentClassName || '' }}"
style="{{ contentStyle || '' }}">
class="filterDemo-items-content {{currentOpen === index ? 'filterDemo-items-content-active' : ''}} {{contentClassName || ''}}"
style="{{contentStyle || ''}}"
>
<ant-selector
options="{{ item.options }}"
options="{{item.options}}"
onChange="handleChange"
data-index="{{ index }}" />
data-index="{{index}}"
></ant-selector>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,39 +1,37 @@
<container title="基础用法">
<skeleton />
<skeleton></skeleton>
</container>
<container title="有动画的骨架屏">
<skeleton animate="{{ true }}" />
<skeleton animate="{{true}}"></skeleton>
</container>
<container title="带avatar">
<skeleton avatar="{{ true }}" />
<skeleton avatar="{{true}}"></skeleton>
</container>
<container title="自定义组合">
<view class="list">
<skeleton-avatar className="custom" />
<skeleton-avatar className="custom"></skeleton-avatar>
<skeleton-paragraph
className="custom"
rows="{{ 1 }}" />
<skeleton-input className="custom" />
<skeleton-input className="custom" />
<skeleton-input className="custom" />
rows="{{1}}"
></skeleton-paragraph>
<skeleton-input className="custom"></skeleton-input>
<skeleton-input className="custom"></skeleton-input>
<skeleton-input className="custom"></skeleton-input>
<skeleton-button
className="custom"
size="small" />
size="small"
></skeleton-button>
</view>
</container>
<container title="复杂组合">
<skeleton
loading="{{ showLoading }}"
title="{{ false }}"
avatar="{{ true }}"
paragraph="{{ paragraph }}">
loading="{{showLoading}}"
title="{{false}}"
avatar="{{true}}"
paragraph="{{paragraph}}"
>
<view class="container">
<avatar
src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" />
<avatar src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"></avatar>
<view class="content">
We supply a series of design principles, practical patterns and high
quality design resources, to help people create their product prototypes
@ -45,7 +43,8 @@
显示骨架
<switch
style="margin-left: 8px"
checked="{{ showLoading }}"
onChange="handleToggleShowLoading" />
checked="{{showLoading}}"
onChange="handleToggleShowLoading"
></switch>
</view>
</container>
</container>

View File

@ -1,116 +1,117 @@
<container title="基本使用">
<ant-slider
defaultValue="{{ 80 }}"
defaultValue="{{80}}"
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="无节点双滑块">
<ant-slider
defaultValue="{{ [20, 60] }}"
defaultValue="{{[20, 60]}}"
range
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="节点单滑块">
<ant-slider
defaultValue="{{ 60 }}"
step="{{ 20 }}"
defaultValue="{{60}}"
step="{{20}}"
showTicks
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="有数字节点单滑块">
<ant-slider
defaultValue="{{ 80 }}"
step="{{ 20 }}"
defaultValue="{{80}}"
step="{{20}}"
showTicks
showNumber
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="节点双滑块">
<ant-slider
defaultValue="{{ [10, 50] }}"
step="{{ 10 }}"
defaultValue="{{[10, 50]}}"
step="{{10}}"
showTicks
range
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="有数字节点双滑块">
<ant-slider
defaultValue="{{ [10, 50] }}"
step="{{ 10 }}"
defaultValue="{{[10, 50]}}"
step="{{10}}"
showTicks
showNumber
range
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="在拖动时显示悬浮提示">
<ant-slider
defaultValue="{{ 80 }}"
defaultValue="{{80}}"
showTooltip
onChange="onChange"
onAfterChange="onAfterChange" />
onAfterChange="onAfterChange"
></ant-slider>
</container>
<container title="受控模式">
<ant-slider
min="{{ 0 }}"
max="{{ 100 }}"
value="{{ value }}"
onChange="handleChange" />
min="{{0}}"
max="{{100}}"
value="{{value}}"
onChange="handleChange"
></ant-slider>
<ant-stepper
min="{{ 0 }}"
max="{{ 100 }}"
value="{{ value }}"
onChange="handleChange" />
min="{{0}}"
max="{{100}}"
value="{{value}}"
onChange="handleChange"
></ant-stepper>
</container>
<container title="自定义">
<ant-slider
defaultValue="{{ 80 }}"
step="{{ 20 }}"
defaultValue="{{80}}"
step="{{20}}"
showTooltip
showTicks
showNumber
activeLineStyle="background-color: #ff8f1f"
activeDotStyle="background-color: red"
onChange="onChange"
onAfterChange="onAfterChange">
<!-- display: inline -->
<text
slot="tick"
slot-scope="props"
>{{ props.value }}°C</text
>
<!-- display: inline -->
<text
slot="tooltip"
slot-scope="props"
>{{ props.value }}°C</text
>
onAfterChange="onAfterChange"
>
<view slot="slider">
<view class="custom-slider-handler">
<ant-icon
type="SmileOutline"
style="color: #ff8f1f" />
style="color: #ff8f1f"
></ant-icon>
</view>
</view>
<!--微信暂时不支持 slot-->
<!--display: inline-->
<text
slot="tick"
slot-scope="props"
>{{props.value}}°C</text>
<!--display: inline-->
<text
slot="tooltip"
slot-scope="props"
>{{props.value}}°C</text>
</ant-slider>
</container>
<container title="禁用状态">
<ant-slider
defaultValue="{{ 80 }}"
defaultValue="{{80}}"
disabled
onChange="onChange" />
</container>
onChange="onChange"
></ant-slider>
</container>

View File

@ -3,64 +3,74 @@
onChange="onChange"
onBlur="onBlur"
onConfirm="onConfirm"
onFocus="onFocus" />
onFocus="onFocus"
></stepper>
</container>
<container title="初始值">
<stepper defaultValue="{{ 0 }}" />
<stepper defaultValue="{{0}}"></stepper>
</container>
<container title="step 0.01">
<stepper
defaultValue="{{ 0 }}"
step="{{ 0.01 }}"
inputStyle="width: 60px" />
defaultValue="{{0}}"
step="{{0.01}}"
inputStyle="width: 60px"
></stepper>
</container>
<container title="precision 1">
<stepper
defaultValue="{{ 0 }}"
precision="{{ 1 }}"
inputStyle="width: 60px" />
defaultValue="{{0}}"
precision="{{1}}"
inputStyle="width: 60px"
></stepper>
</container>
<container title="限制输入范围 [0, 10]">
<stepper
defaultValue="{{ 0 }}"
min="{{ 0 }}"
max="{{ 10 }}"
step="{{ 1 }}" />
defaultValue="{{0}}"
min="{{0}}"
max="{{10}}"
step="{{1}}"
></stepper>
</container>
<container title="禁用状态">
<stepper
defaultValue="{{ 0 }}"
disabled />
defaultValue="{{0}}"
disabled
></stepper>
</container>
<container title="输入框只读">
<stepper
defaultValue="{{ 0 }}"
inputReadOnly />
defaultValue="{{0}}"
inputReadOnly
></stepper>
</container>
<container title="受控组件">
<stepper
value="{{ value }}"
value="{{value}}"
onChange="handleChange"
style="margin: 8px 0"
onBlur="onBlur"
onConfirm="onConfirm"
onFocus="onFocus" />
value: {{ value }}
onFocus="onFocus"
></stepper>
value: {{value}}
<view class="list">
<ant-button
inline
onTap="add">
onTap="add"
>
add
</ant-button>
<ant-button
inline
onTap="minus">
onTap="minus"
>
minus
</ant-button>
<ant-button
inline
onTap="clear">
onTap="clear"
>
clear
</ant-button>
</view>
</container>
</container>

View File

@ -1,59 +1,61 @@
<container title="横向步骤条">
<steps items="{{ items }}" />
<steps items="{{items}}"></steps>
</container>
<container title="横向步骤条失败">
<steps
items="{{ items }}"
items="{{items}}"
status="error"
current="{{ 1 }}" />
current="{{1}}"
></steps>
</container>
<container title="纵向步骤条">
<steps
items="{{ items }}"
direction="vertical" />
items="{{items}}"
direction="vertical"
></steps>
</container>
<container title="纵向步骤条失败">
<steps
items="{{ items }}"
items="{{items}}"
status="error"
current="{{ 1 }}"
direction="vertical" />
current="{{1}}"
direction="vertical"
></steps>
</container>
<container title="自定义图标">
<steps items="{{ items }}">
<steps items="{{items}}">
<icon
slot="icon"
type="SmileFill" />
type="SmileFill"
></icon>
</steps>
</container>
<container title="更多自定义">
<steps
items="{{ items }}"
current="{{ 2 }}">
items="{{items}}"
current="{{2}}"
>
<block
slot="icon"
slot-scope="item">
slot-scope="item"
>
<icon
a:if="{{ iconList[item.index] }}"
type="{{ iconList[item.index] }}" />
a:if="{{iconList[item.index]}}"
type="{{iconList[item.index]}}"
></icon>
</block>
<view
slot="title"
slot-scope="item">
{{ item.index + 1 }}
slot-scope="item"
>
{{item.index + 1}}
</view>
<view
slot="description"
slot-scope="item">
<view>{{ item.value.title }}</view>
<view>{{ item.value.description }}</view>
slot-scope="item"
>
<view>{{item.value.title}}</view>
<view>{{item.value.description}}</view>
</view>
</steps>
</container>
</container>

View File

@ -1,16 +1,19 @@
<ant-container title="步骤条控制">
<ant-steps
items="{{ items }}"
current="{{ current }}" />
items="{{items}}"
current="{{current}}"
></ant-steps>
<ant-button
onTap="onNextTap"
type="primary">
<view a:if="{{ current < items.length - 1 }}">下一步</view>
type="primary"
>
<view a:if="{{current < items.length - 1}}">下一步</view>
<view a:else>完成</view>
</ant-button>
<ant-button
a:if="{{ current > 0 }}"
onTap="onPrevTap">
a:if="{{current > 0}}"
onTap="onPrevTap"
>
上一步
</ant-button>
</ant-container>
</ant-container>

View File

@ -2,22 +2,23 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">基础用法</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -2,22 +2,23 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">去除松开手之后的滑动回弹效果</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ false }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{false}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -2,22 +2,23 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">按钮在左侧</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
leftButtons="{{ leftBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
leftButtons="{{leftBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">左侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -2,23 +2,24 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">左右两侧都有按钮</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
leftButtons="{{ rightBtns }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
leftButtons="{{rightBtns}}"
rightButtons="{{rightBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -2,22 +2,23 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">删除按钮滑动到最大距离触发二次确认</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,30 +1,30 @@
<import-sjs
from="./slice.sjs"
name="utils" />
name="utils"
></import-sjs>
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">调整按钮数量,最多为3个</view>
<block
a:for="{{ 5 }}"
a:for="{{5}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ utils.sliceButton(rightBtns, index) }}"
elasticity="{{ index !== 0 }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{utils.sliceButton(rightBtns, index)}}"
elasticity="{{index !== 0}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">
右侧-{{ index + 1 > 3 ? 3 : index + 1 }}个按钮
右侧-{{index + 1 > 3 ? 3 : index + 1}}个按钮
</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -2,72 +2,85 @@
<view class="t-swipe-item">
<view class="t-swipe-item-title">自定义按钮</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
leftButtons="{{ leftBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
leftButtons="{{leftBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">左右自定义按钮</view>
<view
slot="delete"
class="t-swipe-item-con-btn">
class="t-swipe-item-con-btn"
>
<ant-icon
type="DeleteOutline"
className="t-swipe-item-con-btn-icon" />
<!-- display: inline -->
className="t-swipe-item-con-btn-icon"
></ant-icon>
<!--display: inline-->
<text class="t-swipe-item-con-btn-del">删除</text>
</view>
<view
slot="delete-confirm"
class="t-swipe-item-con-btn">
class="t-swipe-item-con-btn"
>
<ant-icon
type="DeleteOutline"
className="t-swipe-item-con-btn-icon" />
className="t-swipe-item-con-btn-icon"
></ant-icon>
<view class="t-swipe-item-con-btn-del">确认删除吗?</view>
</view>
<view
slot="reName"
class="t-swipe-item-con-btn">
class="t-swipe-item-con-btn"
>
<ant-icon
type="EditFill"
className="t-swipe-item-con-btn-icon" />
className="t-swipe-item-con-btn-icon"
></ant-icon>
<view class="t-swipe-item-con-btn-del">重命名</view>
</view>
<view
slot="reName-confirm"
class="t-swipe-item-con-btn">
class="t-swipe-item-con-btn"
>
<ant-icon
type="EditFill"
className="t-swipe-item-con-btn-icon" />
className="t-swipe-item-con-btn-icon"
></ant-icon>
<view class="t-swipe-item-con-btn-del">确认修改吗?</view>
</view>
<view
slot="reName-left"
class="t-swipe-item-con-btn left-slot">
class="t-swipe-item-con-btn left-slot"
>
<ant-icon
type="EditFill"
className="t-swipe-item-con-btn-icon" />
className="t-swipe-item-con-btn-icon"
></ant-icon>
<view class="t-swipe-item-con-btn-del">重命名</view>
</view>
<view
slot="reName-left-confirm"
class="t-swipe-item-con-btn left-slot">
class="t-swipe-item-con-btn left-slot"
>
<ant-icon
type="EditFill"
className="t-swipe-item-con-btn-icon" />
className="t-swipe-item-con-btn-icon"
></ant-icon>
<view class="t-swipe-item-con-btn-del">确认修改吗?</view>
</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,25 +1,25 @@
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">滑动速度变慢</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ false }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{false}}"
damping="25"
swiped="{{ swipeIndex === index }}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,24 +1,24 @@
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">删除按钮点击二次确认</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,24 +1,24 @@
<view class="t-swipe">
<view class="t-swipe-item">
<view class="t-swipe-item-title">自定义按钮宽度</view>
<block
a:for="{{ 10 }}"
a:for="{{10}}"
a:for-index="index"
a:for-item="_"
a:key="{{ index }}">
>
<view class="t-swipe-item-con">
<ant-swipe-action
data-item="{{ index }}"
rightButtons="{{ rightBtns }}"
elasticity="{{ true }}"
swiped="{{ swipeIndex === index }}"
data-item="{{index}}"
rightButtons="{{rightBtns}}"
elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
onSwipeEnd="onSwipeEnd"
onSwipeStart="onSwipeStart"
onButtonTap="onButtonTap">
onButtonTap="onButtonTap"
>
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
</ant-swipe-action>
</view>
</block>
</view>
</view>
</view>

View File

@ -1,64 +1,71 @@
<view>
<container title="基础用法">
<switch />
<switch></switch>
</container>
<container title="有默认值">
<switch
defaultChecked="{{ true }}"
onChange="onChange" />
defaultChecked="{{true}}"
onChange="onChange"
></switch>
</container>
<container title="文字和图标">
<switch
checkedText="开"
uncheckedText="关"
onChange="onChange" />
onChange="onChange"
></switch>
<switch>
<ant-icon
type="CheckOutline"
slot="checkedText" />
slot="checkedText"
></ant-icon>
<ant-icon
type="CloseOutline"
slot="uncheckedText" />
slot="uncheckedText"
></ant-icon>
</switch>
</container>
<container title="自定义颜色">
<switch
defaultChecked="{{ true }}"
color="#00b578" />
defaultChecked="{{true}}"
color="#00b578"
></switch>
</container>
<container title="禁用状态">
<switch
defaultChecked="{{ true }}"
disabled="{{ true }}" />
<switch disabled="{{ true }}" />
defaultChecked="{{true}}"
disabled="{{true}}"
></switch>
<switch disabled="{{true}}"></switch>
</container>
<container title="加载状态">
<switch loading />
<switch loading></switch>
</container>
<container title="不同尺寸">
<view class="line">
<view>medium:</view>
<switch size="medium" />
<switch size="medium"></switch>
</view>
<view class="line">
<view>small:</view>
<switch size="small" />
<switch size="small"></switch>
</view>
<view class="line">
<view>x-small:</view>
<switch size="x-small" />
<switch size="x-small"></switch>
</view>
</container>
<container title="受控模式">
<switch
checked="{{ checked }}"
checked="{{checked}}"
onChange="handleChange"
defaultChecked="{{ true }}" />
defaultChecked="{{true}}"
></switch>
<button
style="margin-top: 10px"
onTap="handleChangeByButton">
onTap="handleChangeByButton"
>
切换
</button>
</container>
</view>
</view>

View File

@ -1,19 +1,19 @@
<container title="基础用法">
<tab-bar items="{{ tabs }}" />
<tab-bar items="{{tabs}}"></tab-bar>
</container>
<container title="受控模式">
<tab-bar
items="{{ tabs }}"
current="{{ current }}"
onChange="handleChange" />
items="{{tabs}}"
current="{{current}}"
onChange="handleChange"
></tab-bar>
</container>
<container title="红点用法">
<tab-bar items="{{ tabsBadge }}" />
<tab-bar items="{{tabsBadge}}"></tab-bar>
</container>
<container title="自定义高亮颜色">
<tab-bar
items="{{ tabs }}"
activeStyle="color:red;" />
</container>
items="{{tabs}}"
activeStyle="color:red;"
></tab-bar>
</container>

View File

@ -1,65 +1,74 @@
<container title="基础用法">
<tabs items="{{ items }}" />
<tabs items="{{items}}"></tabs>
</container>
<container title="带有content">
<tabs items="{{ items }}">
<tabs items="{{items}}">
<view
class="content"
slot-scope="item">
{{ item.value.content }}
slot="$default"
slot-scope="item"
>
{{item.value.content}}
</view>
</tabs>
</container>
<container title="胶囊">
<tabs
type="capsule"
items="{{ items }}"
defaultCurrent="{{ 1 }}" />
items="{{items}}"
defaultCurrent="{{1}}"
></tabs>
</container>
<container title="带副标题">
<tabs
type="mixin"
items="{{ items }}" />
items="{{items}}"
></tabs>
</container>
<container title="带徽标">
<tabs items="{{ items }}">
<tabs items="{{items}}">
<view
slot="title"
slot-scope="item">
<view a:if="{{ item.value.badge }}">
<badge>{{ item.value.title }}</badge>
slot-scope="item"
>
<view a:if="{{item.value.badge}}">
<badge>{{item.value.title}}</badge>
</view>
<view a:else>{{ item.value.title }}</view>
<view a:else>{{item.value.title}}</view>
</view>
</tabs>
</container>
<container title="禁用状态">
<tabs items="{{ items2 }}" />
<tabs items="{{items2}}"></tabs>
</container>
<container title="onChange">
<tabs
items="{{ items }}"
onChange="onChange" />
items="{{items}}"
onChange="onChange"
></tabs>
</container>
<container title="plus按钮">
<tabs items="{{ items }}">
<tabs items="{{items}}">
<view slot="plus">
<icon
type="AddOutline"
onTap="onPlus" />
onTap="onPlus"
></icon>
</view>
</tabs>
</container>
<container title="控制模式">
<tabs
items="{{ items }}"
current="{{ current }}"
onChange="handleChange" />
items="{{items}}"
current="{{current}}"
onChange="handleChange"
></tabs>
</container>
<container title="content在外层自定义">
<tabs
items="{{ items }}"
current="{{ current }}"
onChange="handleChange" />
<view class="content">{{ items[current].content }}</view>
</container>
items="{{items}}"
current="{{current}}"
onChange="handleChange"
></tabs>
<view class="content">{{items[current].content}}</view>
</container>

View File

@ -1,31 +1,34 @@
<tabs
items="{{ items }}"
current="{{ current }}"
onChange="onChange">
<view class="content">{{ items[current].content }}</view>
items="{{items}}"
current="{{current}}"
onChange="onChange"
>
<view class="content">{{items[current].content}}</view>
</tabs>
<view class="container">current: {{ current }} length: {{ items.length }}</view>
<view class="container">current: {{current}} length: {{items.length}}</view>
<view class="buttons">
<ant-button
inline
onTap="onPrevTap">
onTap="onPrevTap"
>
上一个
</ant-button>
<ant-button
inline
onTap="onNextTap">
onTap="onNextTap"
>
下一个
</ant-button>
<ant-button
inline
onTap="onAddTap">
onTap="onAddTap"
>
添加
</ant-button>
<ant-button
inline
onTap="onMinusTap">
onTap="onMinusTap"
>
减少
</ant-button>
</view>
</view>

View File

@ -1,37 +1,40 @@
<tabs
items="{{ items }}"
current="{{ current }}"
items="{{items}}"
current="{{current}}"
onChange="onChange"
className="tabs">
<view
slot="title"
onTap="onTap"
slot-scope="item">
{{ item.value.title }}
</view>
className="tabs"
>
<scroll-view
id="scroll-view"
onScroll="onScroll"
onTouchStart="onTouchStart"
scroll-top="{{ scrollTop }}"
scroll-y="{{ true }}"
scroll-with-animation="{{ true }}"
scroll-animation-duration="{{ 300 }}"
class="content">
scrollTop="{{scrollTop}}"
scrollY="{{true}}"
scrollWithAnimation="{{true}}"
scrollAnimationDuration="{{300}}"
class="content"
>
<block
a:for="{{ items }}"
a:for="{{items}}"
a:for-index="index"
a:for-item="item"
a:key="{{ index }}">
>
<view class="item">
<view
class="title"
id="tab-item-{{ index }}">
{{ item.title }}
id="tab-item-{{index}}"
>
{{item.title}}
</view>
{{ item.content }}
{{item.content}}
</view>
</block>
</scroll-view>
</tabs>
<view
onTap="onTap"
slot="title"
slot-scope="item"
>
{{item.value.title}}
</view>
</tabs>

View File

@ -1,30 +1,30 @@
<view class="container">
<tabs items="{{ items }}" />
<tabs items="{{items}}"></tabs>
</view>
<view class="container">
选择后居中滚动
<tabs
items="{{ items }}"
scrollMode="center" />
items="{{items}}"
scrollMode="center"
></tabs>
</view>
<view class="container">
<tabs items="{{ items }}">
<tabs items="{{items}}">
<icon
slot="plus"
type="AddOutline" />
type="AddOutline"
></icon>
</tabs>
</view>
<view class="container">
<tabs
items="{{ items }}"
type="capsule" />
items="{{items}}"
type="capsule"
></tabs>
</view>
<view class="container">
<tabs
items="{{ items }}"
type="mixin" />
</view>
items="{{items}}"
type="mixin"
></tabs>
</view>

View File

@ -1,19 +1,19 @@
<view class="intro">
tabs 吸顶模式, 滑动到最顶部会吸顶, 切换tab content会滚动到最顶部
</view>
<tabs
items="{{ items }}"
current="{{ current }}"
items="{{items}}"
current="{{current}}"
onChange="onChange"
className="tabs" />
className="tabs"
></tabs>
<scroll-view
id="scroll-view"
scroll-top="{{ scrollTop }}"
scroll-y="{{ true }}"
scroll-with-animation="{{ true }}"
scroll-animation-duration="{{ 300 }}"
class="content">
{{ items[current].content }}
</scroll-view>
scrollTop="{{scrollTop}}"
scrollY="{{true}}"
scrollWithAnimation="{{true}}"
scrollAnimationDuration="{{300}}"
class="content"
>
{{items[current].content}}
</scroll-view>

View File

@ -1,21 +1,23 @@
<ant-tabs
items="{{ items }}"
current="{{ current }}"
onChange="onChange">
items="{{items}}"
current="{{current}}"
onChange="onChange"
>
<swiper
current="{{ current }}"
autoplay="{{ false }}"
vertical="{{ false }}"
circular="{{ false }}"
onChange="onSwipeChange">
current="{{current}}"
autoplay="{{false}}"
vertical="{{false}}"
circular="{{false}}"
onChange="onSwipeChange"
>
<block
a:for="{{ items }}"
a:for="{{items}}"
a:for-index="index"
a:for-item="item"
a:key="{{ index }}">
>
<swiper-item>
<view class="content">{{ item.content }}</view>
<view class="content">{{item.content}}</view>
</swiper-item>
</block>
</swiper>
</ant-tabs>
</ant-tabs>

Some files were not shown because too many files have changed in this diff Show More