<template>
	<cl-page :padding="20">
		<cl-card label="基础用法">
			<cl-row>
				<cl-col :span="4">
					<cl-loading></cl-loading>
				</cl-col>
			</cl-row>
		</cl-card>

		<cl-card label="不同大小">
			<cl-row>
				<cl-col :span="4">
					<cl-loading></cl-loading>
				</cl-col>

				<cl-col :span="4">
					<cl-loading :size="60"></cl-loading>
				</cl-col>
			</cl-row>
		</cl-card>

		<cl-card label="加载区域">
			<cl-loading-mask loading>
				<view class="space">
					<cl-form>
						<cl-form-item label="昵称">
							<cl-input />
						</cl-form-item>

						<cl-form-item label="性别">
							<cl-select />
						</cl-form-item>
					</cl-form>
				</view>
			</cl-loading-mask>
		</cl-card>
	</cl-page>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.space {
	font-size: 28rpx;
	background-color: #f6f7fa;
	position: relative;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
}
</style>
