账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
边框动画按钮

组件介绍

gal-outline-button 组件会生成一个带有边框动画的按钮组件, 并能够保持按钮的多平台样式统一。

兼容平台

H5APP小程序

组件属性

属性名称类型默认值作用
sizeArray
[260,88,4]尺寸设置 : [ 按钮宽度, 按钮高度, 边框尺寸 ]
backgroundString''按钮背景颜色
lineColorsArray['#03e9f5', '#03e9f5', '#03e9f5','#03e9f5']动画边框颜色,顺序 : 左 上 右 下
haveButtonBooleanfalse是否需要包含一个原生按钮(原生按钮会被透明化,保持多平台按钮样式统一)

演示代码

<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">view 模拟按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button background="#243b55">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#03e9f5;" 
				@tap="onTap">按钮</view>
			</gal-outline-button>
		</view>
		
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">表单功能按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button 
			background="#F8F8F8" 
			:lineColors="['#FF0036 ', '#FF0036', '#E233FF', '#E233FF']" 
			:haveButton="true">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#FF0036;" 
				>按钮</view>
				<view slot="realBtn">
					<button type="default" form-type="submit" @tap="buttonTap" class="button-text">按钮</button>
				</view>
			</gal-outline-button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		onTap : function () {
			uni.showToast({
				title:"按钮点击",
				icon:"none"
			})
		},
		buttonTap : function () {
			uni.showToast({
				title:"原生按钮点击",
				icon:"none"
			})
		}
	}
}
</script>
<style>
.button-text{line-height:88rpx; height:88rpx; width:100%; font-size:28rpx;}
.gal-tap{font-weight:bold;}
</style>