tui-style 常用布局 会员组件

介绍

开发中常用的布局样式，如：主题色，表单组件样式，preview，panel等。

引入

uni-app引入

在项目根目录 App.vue 文件中全局引入样式文件 thorui-extend.css。

<style>
 @import './static/style/thorui-extend.css';
</style>

微信小程序引入

在项目根目录 app.wxss 文件最顶部全局引入样式文件 thorui-extend.wxss。

@import './static/style/thorui-extend.wxss';

主题色更换说明

样式文件顶部设置了基本变量，如果需要自定义主色调可以修改变量值。具体变量如下：

page {
	/* 行为相关颜色 */
	--thorui-color-primary: #5677fc;
	--thorui-color-success: #07c160;
	--thorui-color-warning: #ff7900;
	--thorui-color-error: #EB0909;
	--thorui-color-blue: #007AFF;
	--thorui-color-pink: #f74d54;
	--thorui-color-orange: #f8683c;
	--thorui-color-black: #222;
	--thorui-color-white: #fff;
	--thorui-color-link: #586c94;

	/* 文字基本颜色 */
	--thorui-text-color: #333;
	--thorui-text-color-grey: #999;
	--thorui-text-color-label: #888;
	--thorui-text-color-placeholder: #ccc;
	--thorui-text-color-disable: #c0c0c0;

	/* 背景颜色 */
	--thorui-bg-color: #CCC;
	--thorui-bg-color-grey: #F8F8F8;
	--thorui-bg-color-hover: #ECECEC;

	/* 边框颜色 */
	--thorui-border-color: #d1d1d1;
	--thorui-line-color: rgba(0, 0, 0, 0.1);

	/* 图片尺寸 */
	--thorui-img-size-sm: 60rpx;
	--thorui-img-size-lg: 120rpx;

}

代码演示

部分代码片段演示，具体可参考示例程序。

checkbox 复选框

该内容不再建议使用布局，建议直接使用组件 tui-checkbox 多项选择器

<label class="thorui-checkbox">
	<checkbox color="#5677fc" checked></checkbox>
</label>
<label class="thorui-checkbox">
	<checkbox color="#07c160" checked></checkbox>
</label>
<label class="thorui-checkbox thorui-danger">
	<checkbox color="#fff" checked></checkbox>
</label>
<label class="thorui-checkbox thorui-warning">
	<checkbox color="#fff" checked></checkbox>
</label>

预览

input 输入框

该内容不再建议使用布局，建议直接使用组件 tui-input 输入框

基础布局

 <!--其中 :hover="false" 为uni-app 写法，微信小程序中为 hover="{{false}}" -->
<tui-list-cell :hover="false">
	<view class="thorui-input-item">
		<view class="thorui-input-title">姓名</view>
		<input class="thorui-input" placeholder="请输入姓名" placeholder-class="thorui-phcolor" />
	</view>
</tui-list-cell>
<tui-list-cell :hover="false" unlined>
	<view class="thorui-input-item">
		<view class="thorui-input-title">联系电话</view>
		<input type="number" class="thorui-input" placeholder="请输入手机号" placeholder-class="thorui-phcolor" maxlength="11" />
	</view>
</tui-list-cell>

带清除按钮输入框

 <!--uni-app-->
<tui-list-cell :hover="false" unlined>
	<view class="thorui-input-item">
		<view class="thorui-input-title">姓名</view>
		<input class="thorui-input" placeholder="请输入姓名" placeholder-class="thorui-phcolor" v-model="name" />
		<icon type="clear" :size="14" v-if="name" @tap="name = ''"></icon>
	</view>
</tui-list-cell>
 <!--微信小程序 -->
<tui-list-cell hover="{{false}}" unlined>
	<view class="thorui-input-item">
		<view class="thorui-input-title">姓名</view>
		<input class="thorui-input" placeholder="请输入姓名" placeholder-class="thorui-phcolor" value="{{name}}" bindinput="inputText"/>
		<icon type="clear" size="{{14}}" wx:if="{{name}}" bindtap="clearInput"></icon>
	</view>
</tui-list-cell>

预览

radio 单选框

该内容不再建议使用布局，建议直接使用组件 tui-radio 单项选择器

常用布局一

<!--uni-app-->
<radio-group @change="radioChange">
	<tui-list-cell padding="0" v-for="(item,index) in items" :key="index">
		<label class="thorui-radio thorui-align__center thorui-padding">
			<radio color="#5677fc" :value="item.value"></radio>
			<text class="thorui-left__sm">{{item.name}}</text>
		</label>
	</tui-list-cell>
</radio-group>

<!--微信小程序-->
<radio-group bindchange="radioChange">
	<tui-list-cell padding="0" wx:for="{{items}}" wx:key="index">
		<label class="thorui-radio thorui-align__center thorui-padding">
			<radio color="#5677fc" value="{{item.value}}"></radio>
			<text class="thorui-left__sm">{{item.name}}</text>
		</label>
	</tui-list-cell>
</radio-group>

//data 数据
 items: [{
	value: 'CHN',
	name: '中国',
	checked: true
  }, {
	value: 'USA',
	name: '美国'
  },
  {
	value: 'JPN',
	name: '日本'
  },
  {
	value: 'ENG',
	name: '英国'
  },
  {
	value: 'FRA',
	name: '法国'
  }]

预览

text 文本字体

建议使用组件 tui-text 文本。

预览

loading 加载中

预览

最后两个加载loading为组件 tui-loading。

panel 面板

预览

preview 表单预览

预览

form 表单结构

展示表单页面的信息结构样式。如需表单验证，请查看 tui-validation 表单验证 。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

预览