margin 和 padding;

• .m 为 margin, ml: 左...
• .p 为 padding, ml: 左...
• .m-small .p-small 小距离, 以及 ml-small...

<view class="m pl">有外距, 和左内衬</view>
<view class="p-small">小内衬</view>

alert

<alert>消息</alert>
<alert class="alert-success">成功</alert>
<alert class="alert-error">错误</alert>
<alert class="alert-warn">警示</alert>

dialog

<dialog></dialog>

stack 堆放

<stack>子元素向下排列</stack>
<stack class="stack-row">向右排列</stack>
<stack class="flex-center">子元素居中</stack>
<stack class="flex-center-j">主轴元素居中</stack>
<stack class="flex-center-a">次轴元素居中</stack>
<stack class="flex-grow">撑开</stack>
<stack class="stack-spacing">子项目间距</stack>
<stack class="stack-spacing-">子项目间距1</stack>

grid

• grid-2 2 列
• grid-3 3 列
• grid-4 4 列
• grid-5 5 列
• grid-gap 排水沟(间距)
• grid-gap-1 大排水沟
• 行列独立控制排水沟
  • grid-gap-column
  • grid-gap-row
  • grid-gap-column-1
  • grid-gap-row-1

<grid class="grid-2">2列</grid>
<grid class="grid-3">3列</grid>
<grid class="grid-4">4列</grid>
<grid class="grid-5">5列</grid>
<grid class="grid-gap">排水沟(间距)</grid>
<grid class="grid-gap-1">大排水沟 </grid>

字体和颜色

• text-disabled 灰色
• text-primary 主色
• text-secondary 次色
• text-center 居中
• text-right 居右
• text-nowrap 不折行
• text-overflow 溢出, 需要在上层添加 .overflow-hidden 并具有大小限制
• overflow 自动滚动条
• overflow-x 自动滚动 仅 x
• overflow-y 自动滚动条 仅 y
• overflow-hidden 超出隐藏

图标

<icon src="VolunteerActivismIcon"></icon>
<icon class="avatar" src="VolunteerActivismIcon"></icon>
<icon class="avatar" src="01/chengzhong"></icon>

水平线

<divider></divider>

圆角

• .radius 圆角
• .radius-small 小圆角
• .radius-100 全圆角

阴影

• shadow1 .... shadow9

标签

<chip>突出显示</chip>
<chip class="chip-disabled">灰色灰色</chip>
<chip class="chip-secondary">次要</chip>

满屏宽度

• full-w 宽 100%
• full-h 高 100%
• full-vw 高 满屏
• full-vh 高 满屏

卡片

<card>
<!-- 头 -->
      <stack class="stack-row pr flex-center-a">
            <icon class="avatar m" src="VolunteerActivismIcon"></icon>
            <stack class="m">
                  <view class="text-title">标题</view>
                  <view class="text-subtitle">次标题</view>
            </stack>
             <button class="button-icon button-contained">
                  <icon src="CloseIcon"></icon>
            </button>
      </stack>
<!-- 分隔线 -->
      <divider></divider>
<!-- 图片 -->
      <stack class="card-image">
            <image src="https://yun.gansudaily.com.cn/upload/vote/807102f6624af82804621af22be35f91/image/1649386474265807f7ca449148461a01b6aa8b5334380.jpeg"></image>
            <label class="label-c">
                  <view class="bg-primary p radius-small">标签</view>
            </label>
      </stack>
      <view class="p">内容</view>
<!-- 按钮 -->
      <view class="stack stack-row flex-end">
            <view class="flex-grow"></view>
            <button class="button-icon button-contained">
                  <icon src="CloseIcon"></icon>
            </button>
      </view>
</card>

对话框

将 card 或其他 内容放入 dialog 即可

<dialog>
  <card>...</card>
</dialog>

下抽屉及关闭事件, 通过 open 控制销毁和显示

<dialog bottom="{{true}}" wx:if="{{open}}" bind:onClose="onClose">
  <alert class="alert-success">msg</alert>
</dialog>

  onClose() {
    this.setData({ open: false })
  },

表单

formcontrol-filled 为填充样式 默认为 outlined

<formcontrol class="formcontrol-filled">
      <label>关键字</label>
      <input placeholder="x" />
</formcontrol>

按钮

button-contained 实体按钮 button-outlined 线框按钮 button-icon 图标按钮

<button class="button-icon button-contained">
  <icon src="CloseIcon"></icon>
</button>

选项卡 tabs

<tabs
  value="{{tabsIndex}}"
  tabs="{{['开始','第二']}}"
  bind:change="onTabsChange"
></tabs>
<swiper class="swiper" bindchange="onTabsChange" current="{{tabsIndex}}">
  <swiper-item>
    <view>tab1</view>
  </swiper-item>
  <swiper-item>
    <view>tab2</view>
  </swiper-item>
</swiper>

两个必须的值

 data:{ tabsIndex:0 },
 onTabsChange(e) {
   this.setData({ tabsIndex: e.detail.current });
  },

骨架屏 进度条 loading

1 横条 2 伸缩条 3 带圆圈长条 4 进度条 属性: value:number 进度值 0-1; color:string 颜色 5 缓冲条 属性: color:string 颜色 6 loop 转圈图标 7 圆形进度

<skeleton modes="{{[1,2,3, 4, 5, 6]}}" value="{{.5}}"></skeleton>