1. <button class="cu-btn line-red round margin"><text class="cuIcon-emojifill"></text>按钮</button>

按钮设计器

image.png

按钮形状

image.png

  1.             <button class="cu-btn">默认</button>
  2.             <button class="cu-btn round">圆角</button>
  3.             <button class="cu-btn cuIcon">
  4.                 <text class="cuIcon-emojifill"></text>
  5.             </button>

按钮尺寸

image.png

  1.             <button class="cu-btn round sm">小尺寸</button>
  2.             <button class="cu-btn round">默认</button>
  3.             <button class="cu-btn round lg">大尺寸</button>

按钮颜色

image.png

  1.         <view class="grid col-5 padding-sm">
  2.             <view class="margin-tb-sm text-center">
  3.                 <button class="cu-btn round bg-red">嫣红</button>
  4.             </view>
  5.             <view class="margin-tb-sm text-center">
  6.                 <button class="cu-btn round bg-orange">桔橙</button>
  7.             </view>
  8.             <view class="margin-tb-sm text-center">
  9.                 <button class="cu-btn round bg-yellow">明黄</button>
  10.             </view>
  11.             <view class="margin-tb-sm text-center">
  12.                 <button class="cu-btn round bg-olive">橄榄</button>
  13.             </view>
  14.             <view class="margin-tb-sm text-center">
  15.                 <button class="cu-btn round bg-green">森绿</button>
  16.             </view>
  17.             <view class="margin-tb-sm text-center">
  18.                 <button class="cu-btn round bg-cyan">天青</button>
  19.             </view>
  20.             <view class="margin-tb-sm text-center">
  21.                 <button class="cu-btn round bg-blue">海蓝</button>
  22.             </view>
  23.             <view class="margin-tb-sm text-center">
  24.                 <button class="cu-btn round bg-purple">姹紫</button>
  25.             </view>
  26.             <view class="margin-tb-sm text-center">
  27.                 <button class="cu-btn round bg-mauve">木槿</button>
  28.             </view>
  29.             <view class="margin-tb-sm text-center">
  30.                 <button class="cu-btn round bg-pink">桃粉</button>
  31.             </view>
  32.             <view class="margin-tb-sm text-center">
  33.                 <button class="cu-btn round bg-brown">棕褐</button>
  34.             </view>
  35.             <view class="margin-tb-sm text-center">
  36.                 <button class="cu-btn round bg-grey">玄灰</button>
  37.             </view>
  38.             <view class="margin-tb-sm text-center">
  39.                 <button class="cu-btn round bg-gray">草灰</button>
  40.             </view>
  41.             <view class="margin-tb-sm text-center">
  42.                 <button class="cu-btn round bg-black">墨黑</button>
  43.             </view>
  44.             <view class="margin-tb-sm text-center">
  45.                 <button class="cu-btn round bg-white">雅白</button>
  46.             </view>
  47.         </view>

image.png

  1.     <view class="grid col-5 padding-sm">
  2.             <view class="margin-tb-sm text-center">
  3.                 <button class="cu-btn round bg-red shadow">嫣红</button>
  4.             </view>
  5.             <view class="margin-tb-sm text-center">
  6.                 <button class="cu-btn round bg-orange shadow">桔橙</button>
  7.             </view>
  8.             <view class="margin-tb-sm text-center">
  9.                 <button class="cu-btn round bg-yellow shadow">明黄</button>
  10.             </view>
  11.             <view class="margin-tb-sm text-center">
  12.                 <button class="cu-btn round bg-olive shadow">橄榄</button>
  13.             </view>
  14.             <view class="margin-tb-sm text-center">
  15.                 <button class="cu-btn round bg-green shadow">森绿</button>
  16.             </view>
  17.             <view class="margin-tb-sm text-center">
  18.                 <button class="cu-btn round bg-cyan shadow">天青</button>
  19.             </view>
  20.             <view class="margin-tb-sm text-center">
  21.                 <button class="cu-btn round bg-blue shadow">海蓝</button>
  22.             </view>
  23.             <view class="margin-tb-sm text-center">
  24.                 <button class="cu-btn round bg-purple shadow">姹紫</button>
  25.             </view>
  26.             <view class="margin-tb-sm text-center">
  27.                 <button class="cu-btn round bg-mauve shadow">木槿</button>
  28.             </view>
  29.             <view class="margin-tb-sm text-center">
  30.                 <button class="cu-btn round bg-pink shadow">桃粉</button>
  31.             </view>
  32.             <view class="margin-tb-sm text-center">
  33.                 <button class="cu-btn round bg-brown shadow">棕褐</button>
  34.             </view>
  35.             <view class="margin-tb-sm text-center">
  36.                 <button class="cu-btn round bg-grey shadow">玄灰</button>
  37.             </view>
  38.             <view class="margin-tb-sm text-center">
  39.                 <button class="cu-btn round bg-gray shadow">草灰</button>
  40.             </view>
  41.             <view class="margin-tb-sm text-center">
  42.                 <button class="cu-btn round bg-black shadow">墨黑</button>
  43.             </view>
  44.             <view class="margin-tb-sm text-center">
  45.                 <button class="cu-btn round bg-white shadow">雅白</button>
  46.             </view>
  47.         </view>

镂空按钮

image.png

  1.         <view class="grid col-5 padding-sm">
  2.             <view class="margin-tb-sm text-center">
  3.                 <button class="cu-btn round line-red">嫣红</button>
  4.             </view>
  5.             <view class="margin-tb-sm text-center">
  6.                 <button class="cu-btn round line-orange">桔橙</button>
  7.             </view>
  8.             <view class="margin-tb-sm text-center">
  9.                 <button class="cu-btn round line-yellow">明黄</button>
  10.             </view>
  11.             <view class="margin-tb-sm text-center">
  12.                 <button class="cu-btn round line-olive">橄榄</button>
  13.             </view>
  14.             <view class="margin-tb-sm text-center">
  15.                 <button class="cu-btn round line-green">森绿</button>
  16.             </view>
  17.             <view class="margin-tb-sm text-center">
  18.                 <button class="cu-btn round line-cyan">天青</button>
  19.             </view>
  20.             <view class="margin-tb-sm text-center">
  21.                 <button class="cu-btn round line-blue">海蓝</button>
  22.             </view>
  23.             <view class="margin-tb-sm text-center">
  24.                 <button class="cu-btn round line-purple">姹紫</button>
  25.             </view>
  26.             <view class="margin-tb-sm text-center">
  27.                 <button class="cu-btn round line-mauve">木槿</button>
  28.             </view>
  29.             <view class="margin-tb-sm text-center">
  30.                 <button class="cu-btn round line-pink">桃粉</button>
  31.             </view>
  32.             <view class="margin-tb-sm text-center">
  33.                 <button class="cu-btn round line-brown">棕褐</button>
  34.             </view>
  35.             <view class="margin-tb-sm text-center">
  36.                 <button class="cu-btn round line-grey">玄灰</button>
  37.             </view>
  38.             <view class="margin-tb-sm text-center">
  39.                 <button class="cu-btn round line-gray">草灰</button>
  40.             </view>
  41.             <view class="margin-tb-sm text-center">
  42.                 <button class="cu-btn round line-black">墨黑</button>
  43.             </view>
  44.             <view class="margin-tb-sm text-center">
  45.                 <button class="cu-btn round line-white">雅白</button>
  46.             </view>
  47.         </view>

image.png

    <view class="grid col-5 padding-sm">
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-red">嫣红</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-orange">桔橙</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-yellow">明黄</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-olive">橄榄</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-green">森绿</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-cyan">天青</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-blue">海蓝</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-purple">姹紫</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-mauve">木槿</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-pink">桃粉</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-brown">棕褐</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-grey">玄灰</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-gray">草灰</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-black">墨黑</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="cu-btn round lines-white">雅白</button>
            </view>
        </view>

块状按钮

image.png

        <view class="padding flex flex-direction">
            <button class="cu-btn bg-grey lg">玄灰</button>
            <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
        </view>

无效按钮

image.png

        <view class="padding">
            <button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
            <button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
        </view>

按钮加图标

image.png

   <view class="padding-xl">
            <button class="cu-btn block line-orange lg">
                <text class="cuIcon-upload"></text> 图标</button>
            <button class="cu-btn block bg-blue margin-tb-sm lg">
                <text class="cuIcon-loading2 cuIconfont-spin"></text> 加载</button>
            <button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
        </view>