wlyyui 文档 wlyyui 文档
首页
  • 介绍
  • 快速上手
  • 自定义主题
  • 基础组件

    • Color 色彩
    • Text 文本
    • Icon 图标
    • Button 按钮
    • Animation 动画
  • 布局组件

    • GridLayout 栅格布局
    • Grid 宫格
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
  • 表单组件

    • Calendar 日历
    • Cascader 级联选择器
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Slider 滑块选择器
    • Form 表单校验
    • FormItem 表单项
    • Select 选择器
    • Input 输入框
    • InputNumber 数字输入框
    • Label 标签
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • Rate 评分
    • Upload 图片上传
    • UploadVideo 视频上传
    • SearchBar 搜索栏
  • 反馈类型组件

    • ActionSheet 上拉菜单
    • Toast 轻提示
    • Backdrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Gallery 画廊
    • Landscape 压屏窗
    • LoadAni 加载动画
    • Spin 旋转动画
    • Message 消息提示
  • 导航类型组件

    • NavBar 导航栏
    • BubbleBox 气泡框
    • Seg_tab 分段器
    • Tabbar 标签栏
    • BottomNavbar 底部导航栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
    • SideMenu 纵向选项卡
  • 展示组件

    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Tag 标签
    • Progress 进度条
    • Circle 圆形进度条
    • CountDown 倒计时
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 缺省页
    • Skeleton 骨架屏
    • Parse 富文本
  • 拓展组件

    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • SingleInput 单输入框
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • LicensePlate 车牌号键盘
    • SwiperDot 轮播图指示点
    • CopyText 长按复制
    • CubicBezier 贝塞尔曲线
    • ImageCropper 图片裁剪
    • Drag 拖拽排序
    • RotateVerify 旋转验证码
    • SliderCaptcha 滑块拼图验证
资源
案例
GitHub (opens new window)
首页
  • 介绍
  • 快速上手
  • 自定义主题
  • 基础组件

    • Color 色彩
    • Text 文本
    • Icon 图标
    • Button 按钮
    • Animation 动画
  • 布局组件

    • GridLayout 栅格布局
    • Grid 宫格
    • Panel 面板
    • Preview 表单预览
    • List 列表
    • Card 卡片
  • 表单组件

    • Calendar 日历
    • Cascader 级联选择器
    • Picker 选择器
    • DatePicker 日期时间选择器
    • Slider 滑块选择器
    • Form 表单校验
    • FormItem 表单项
    • Select 选择器
    • Input 输入框
    • InputNumber 数字输入框
    • Label 标签
    • Radio 单选框
    • Checkbox 复选框
    • Switch 开关
    • Textarea 多行输入框
    • Rate 评分
    • Upload 图片上传
    • UploadVideo 视频上传
    • SearchBar 搜索栏
  • 反馈类型组件

    • ActionSheet 上拉菜单
    • Toast 轻提示
    • Backdrop 遮罩层
    • Dialog 对话框
    • DropdownMenu 下拉菜单
    • Modal 模态框
    • Gallery 画廊
    • Landscape 压屏窗
    • LoadAni 加载动画
    • Spin 旋转动画
    • Message 消息提示
  • 导航类型组件

    • NavBar 导航栏
    • BubbleBox 气泡框
    • Seg_tab 分段器
    • Tabbar 标签栏
    • BottomNavbar 底部导航栏
    • Tabs 标签页
    • IndexList 索引列表
    • NoticeBar 通告栏
    • Sticky 吸顶容器
    • Steps 步骤条
    • Fab 浮动按钮
    • Drawer 抽屉
    • BottomPopup 底部弹出层
    • TopPopup 顶部弹出层
    • TimeAxis 时间轴
    • SideMenu 纵向选项卡
  • 展示组件

    • Badge 徽章
    • Alert 警告框
    • Avatar 头像
    • Tag 标签
    • Tag 标签
    • Progress 进度条
    • Circle 圆形进度条
    • CountDown 倒计时
    • Divider 分割线
    • LoadMore 加载更多
    • Empty 缺省页
    • Skeleton 骨架屏
    • Parse 富文本
  • 拓展组件

    • ShareSheet 分享面板
    • Result 结果页
    • FilterBar 筛选栏
    • SingleInput 单输入框
    • DigitalRoller 数字滚轮
    • DigitalKeyboard 数字键盘
    • LicensePlate 车牌号键盘
    • SwiperDot 轮播图指示点
    • CopyText 长按复制
    • CubicBezier 贝塞尔曲线
    • ImageCropper 图片裁剪
    • Drag 拖拽排序
    • RotateVerify 旋转验证码
    • SliderCaptcha 滑块拼图验证
资源
案例
GitHub (opens new window)
  • 基础组件

    • Color 色彩
    • Text 文本
      • Icon 图标
      • Button 按钮
      • Animation 动画
    • 布局组件

      • GridLayout 栅格布局
      • Grid 宫格
      • Panel 面板
      • Preview 表单预览
      • List 列表
      • Card 卡片
    • 表单组件

      • Calendar 日历
      • Cascader 级联选择器
      • Picker 选择器
      • DatePicker 日期时间选择器
      • Slider 滑块选择器
      • Form 表单校验
      • FormItem 表单项
      • Select 选择器
      • Input 输入框
      • InputNumber 数字输入框
      • Label 标签
      • Radio 单选框
      • Checkbox 复选框
      • Switch 开关
      • Textarea 多行输入框
      • Rate 评分
      • Upload 图片上传
      • UploadVideo 视频上传
      • SearchBar 搜索栏
    • 反馈类型组件

      • ActionSheet 上拉菜单
      • Toast 轻提示
      • Backdrop 遮罩层
      • Dialog 对话框
      • DropdownMenu 下拉菜单
      • Modal 模态框
      • Gallery 画廊
      • Landscape 压屏窗
      • Loading 加载
      • LoadAni 加载动画
      • Spin 旋转动画
      • Message 消息提示
      • SwipeAction 滑动菜单
    • 导航类型组件

      • NavBar 导航栏
      • BubbleBox 气泡框
      • Seg_tab 分段器
      • Tabbar 标签栏
      • BottomNavbar 底部导航栏
      • Tabs 标签页
      • IndexList 索引列表
      • NoticeBar 通告栏
      • Sticky 吸顶容器
      • Steps 步骤条
      • Fab 浮动按钮
      • Drawer 抽屉
      • BottomPopup 底部弹出层
      • TopPopup 顶部弹出层
      • TimeAxis 时间轴
      • SideMenu 纵向选项卡
    • 展示组件

      • Badge 徽章
      • Alert 警告框
      • Avatar 头像
      • Tag 标签
      • DataTag 标签选择
      • Progress 进度条
      • Collapse 折叠面板
      • Circle 圆形进度条
      • CountDown 倒计时
      • Divider 分割线
      • LoadMore 加载更多
      • Empty 缺省页
      • Skeleton 骨架屏
      • Parse 富文本
    • 拓展组件

      • ShareSheet 分享面板
      • Result 结果页
      • FilterBar 筛选栏
      • SingleInput 单输入框
      • DigitalRoller 数字滚轮
      • DigitalKeyboard 数字键盘
      • LicensePlate 车牌号键盘
      • SwiperDot 轮播图指示点
      • CopyText 长按复制
      • CubicBezier 贝塞尔曲线
      • ImageCropper 图片裁剪
      • Drag 拖拽排序
      • SlideVerify 滑动验证码
      • RotateVerify 旋转验证码
      • SliderCaptcha 滑块拼图验证
    目录

    Text 文本

    Text 文本,用于包裹文本内容。

    # 支持平台

    App(vue) App(nvue) H5 小程序
    ✓ ✓ ✓ ✓

    # 代码演示

    部分示例演示,完整使用请参考文档API。

    # 基础使用

    通过 text 属性设置文本内容,size 属性设置字体大小。

    <wui-text :text="text" :size="28"></wui-text>
    
    const text = ref('wlyyUI是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本,兼顾高效率与高性能,让您的开发获得百倍提质提速!')
    

    # 不同样式类型

    通过 text 属性设置文本内容, type 属性设置样式类型。

    <wui-text text="primary" type="primary"></wui-text>
    <wui-text text="success" type="success"></wui-text>
    <wui-text text="warning" type="warning"></wui-text>
    <wui-text text="danger" type="danger"></wui-text>
    

    # 自定义颜色/块状

    通过 text 属性设置文本内容, color 属性设置字体颜色, block 属性设置是否为块状。

    <wui-text text="block" color="brown" block></wui-text>
    

    # 数据脱敏-姓名

    通过 text 属性设置文本内容, text-type属性设置文本类型, format 属性设置文本是否脱敏格式化。

    <wui-text text="张无忌" text-type="name" format></wui-text>
    

    # Slots

    插槽名称 说明
    default 文本左侧自定义内容
    right 文本右侧自定义内容

    # Props

    属性名 类型 说明 默认值 平台差异说明
    type String 样式类型,可选值:primary,success, warning,danger,purple,gray,black black -
    text String 文本内容 - -
    size Number, String 字体大小 32 -
    unit String 字体大小单位,可选值:rpx、px rpx -
    color String 字体颜色,设置值则type失效 - -
    fontWeight String 字重 400 -
    align String 文本对齐方式,可选值:left、center、right left -
    decoration String 文本的修饰,可选值:none、 underline、line-through none -
    lineHeight Boolean 是否将行高设置与字体大小一致 false -
    padding Array 文本padding值,[上,右,下,左] ['0', '0'] -
    block Boolean 是否为块状 false -
    textType String 文本类型,可选值:text、mobile、amount、name text -
    format Boolean 文本是否脱敏格式化,仅textType取值mobile、amount时有效 false -
    call Boolean 点击时是否拨打电话,仅textType取值mobile时有效 false -
    selectable Boolean 文本是否可选 false App、H5、快手小程序有效
    userSelect Boolean 文本是否可选 false 仅微信小程序有效
    decode Boolean 是否解码 false App、H5、微信小程序有效
    highlight Boolean 是否有点击效果 false -
    disable Boolean 是否禁用点击 false -
    unShrink Boolean flex布局下是否取消收缩,不被挤压 false -
    param Number, String 自定义参数,点击事件中回传 - -
    Color 色彩
    Icon 图标

    ← Color 色彩 Icon 图标→

    Theme by Vdoing | Copyright © 2023-2023 Mr zhang | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式