@wines/alert

@wines/alert

Alert 警告框

用于展现警告信息，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Alert",
  "usingComponents": {
    "wux-white-space": "@wines/white-space",
    "wux-icon": "@wines/icon",
    "wux-alert": "@wines/alert"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">Alert</view>
		<view class="page__desc">警告框</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="sub-title">Theme</view>
		<wux-alert theme="light" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="stable" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="positive" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="calm" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="assertive" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="balanced" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="energized" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="royal" title="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert theme="dark" title="https://github.com/wux-weapp/wux-weapp" />
		<view class="sub-title">Closable</view>
		<wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
		<view class="sub-title">Thumb</view>
		<wux-alert thumb="http://cdn.skyvow.cn/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert thumb="http://cdn.skyvow.cn/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
		<wux-white-space/>
		<wux-alert thumb="http://cdn.skyvow.cn/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
		<view class="sub-title">Slot</view>
		<wux-alert theme="balanced">
			<wux-icon
			 wux-class="thumb"
			 type="ios-checkmark-circle-outline"
			 size="20"
			 color="#fff"
			 slot="header"
			/>
			<text>微信小程序自定义组件</text>
			<wux-icon
			 wux-class="close"
			 type="ios-close-circle-outline"
			 size="20"
			 color="#fff"
			 slot="footer"
			/>
		</wux-alert>
		<wux-white-space/>
		<wux-alert theme="energized">
			<wux-icon
			 wux-class="thumb"
			 type="ios-alert"
			 size="20"
			 color="#fff"
			 slot="header"
			/>
			<text>微信小程序自定义组件</text>
		</wux-alert>
		<wux-white-space/>
		<wux-alert theme="assertive">
			<wux-icon
			 wux-class="thumb"
			 type="ios-close-circle-outline"
			 size="20"
			 color="#fff"
			 slot="header"
			/>
			<text>微信小程序自定义组件</text>
		</wux-alert>
	</view>
</view>

API

Alert props

Alert slot

Alert externalClasses