T-UVUE-UI1.0.0

Appearance

Row 水平布局 ​

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title="布局" class="p.30">
		<t-card title='Layout 分栏布局' sub-title="分栏布局组件提供灵活的栅格系统支持，通过简单的属性配置即可实现响应式列宽、偏移和间隔，实现简洁高效的页面布局。"></t-card>
		<t-section title="示例" class="mb.30"></t-section>
		<t-row style="margin-bottom: 15px;">
			<t-col :span="8">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">8</t-text></view>
			</t-col>
			<t-col :span="8">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">8</t-text></view>
			</t-col>
			<t-col :span="8">
				<view class="t-layout-item t-g-error"> <t-text class="c.#fff">8</t-text></view>
			</t-col>
		</t-row>
		<t-row style="margin-bottom: 15px;">
			<t-col :span="6">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">6</t-text></view>
			</t-col>
		</t-row>
		<t-row style="margin-bottom: 15px;">
			<t-col :span="8">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">8</t-text></view>
			</t-col>
			<t-col :span="16">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">16</t-text></view>
			</t-col>
		</t-row>
		<t-section title="分栏偏移" class="mb.30"></t-section>
		<t-row style="margin-bottom: 15px;">
			<t-col :span="5">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">5</t-text></view>
			</t-col>
			<t-col :span="5" :offset="2">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">5</t-text></view>
			</t-col>
			<t-col :span="7" :offset="5">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">7</t-text></view>
			</t-col>
		</t-row>
		<t-section title="间距" class="mb.30"></t-section>
		<t-row>
			<t-col :span="6" :gutter="6">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6" :gutter="6">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6" :gutter="6">
				<view class="t-layout-item t-g-success"><t-text class="c.#fff">6</t-text></view>
			</t-col>
			<t-col :span="6" :gutter="6">
				<view class="t-layout-item t-g-error"><t-text class="c.#fff">6</t-text></view>
			</t-col>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.t-layout-item {
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.t-g-error {
		background-color: #ff5500
	}


	.t-g-success {
		background-color: #0055ff
	}
</style>

Props ​

名称描述类型默认值可选值
hover是否启用悬停效果Booleanfalsetrue, false

Slots ​

名称描述
default默认插槽，用于放置列内的内容。