5.7—divider组件

这篇具有很好参考价值的文章主要介绍了5.7—divider组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

divider

提供分隔器组件,分隔不同内容块/内容元素。可用于列表或界面布局。

支持设备

手机

平板

智慧屏

智能穿戴

支持

支持

支持

支持

子组件

不支持。

属性

除支持通用属性外,还支持如下属性:

名称

类型

默认值

必填

描述

vertical

boolean

false

使用水平分割线还是垂直分割线,默认水平。

说明

  • 不支持focusable、disabled属性。

样式

仅支持如下样式:

名称

类型

默认值

必填

描述

margin

<length>

0

使用简写属性设置所有的外边距属性,该属性可以有1到4个值。

margin-[left|top|right|bottom]

<length>

0

使用简写属性设置左、上、右、下外边距属性,类型length,单位px,默认值0。

color

<color>

手机:#08000000

智慧屏、智能穿戴:#33ffffff

设置分割线颜色。

stroke-width

<length>

1

设置分割线宽度。

display

string

flex

确定分割线所产生的框的类型。值flex/none,默认值flex。

visibility

string

visible

是否显示分割线。不可见的框会占用布局。visible代表显示元素,hidden代表不显示元素。

line-cap

string

butt

设置分割线条的端点样式,默认为butt,可选值为:

  • butt:分割线两端为平行线;
  • round:分割线两端额外添加半圆;
  • square:分割线两端额外添加半方形;

说明

round和square会额外增加一个线宽的分割线长度。

flex

number

-

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-grow

number

0

设置分割线的伸展因子,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex项加起来的大小)的分配系数。0为不伸展。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-shrink

number

1

设置分割线的收缩因子,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-basis

<length>

-

设置分割线在主轴方向上的初始大小。

说明

仅父容器为<div>、<list-item>、<tabs>时生效。

 文章来源地址https://www.toymoban.com/news/detail-485699.html

事件

不支持。

示例 

html

<div class="container">
    <div class="content">
        <text>米多奇米饼</text>
        <divider class="divider" vertical="false"></divider>//vertical判断横线水平还是垂直
        <text>吃了都说好</text>
         </div>
        <div class="cc">
            <text>欧浩辰</text>
            <divider class="ss " vertical="true"></divider>
            <text>我宣你</text>
        </div>
</div>

css

.container {
    margin: 20px;
    flex-direction:column;
    width:100%;
    height:100%;
    align-items:center;
}
.content{
    width:80%;
    height:40%;
    border:1px solid #000000;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}
.divider {
    margin: 10px;
    color: #ff0000ff;
    stroke-width: 3px;
    line-cap: round;
}
.cc{
    flex-direction: row;
    width:80%;
    height:40%;
    border:1px solid #000000;
    align-items: center;
    justify-content: center;
}
.ss{
    margin: 10px;
    color: #ff0000ff;
    stroke-width: 3px;
    line-cap: round;
}

图片

5.7—divider组件 

 

到了这里,关于5.7—divider组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • mysql对以逗号分隔的字段内容进行查询——find_in_set函数或locate函数或position函数

    使用mysql时,有可能一个字段代表一个集合,如果将这个集合单独抽成一张表又不值当的,这个时候我们存储时,可以选择用逗号将数据分隔开(只能用英文的逗号),如图所示: 做查询时怎么查呢? 假如说给一个数据作为查询条件,判断该字段是否存在,应该怎么查呢?

    2024年01月15日
    浏览(53)
  • 探索安卓内容提供者:构建、访问和管理数据【复习】

    内容提供者(ContentProvider)是Android系统四大组件之一,它是不同应用程序之间进行数据共享的标准API ,通过ContentResolver类可以访问ContentProvider中共享的数据。 ContentProvider的工作原理如下: A程序使用ContetntProvider暴露数据,才能被其他程序操作。B程序通过ContetnResolver操作A程序

    2024年02月10日
    浏览(37)
  • 移动应用开发实验-内容提供者-ContentResolver的使用

    本人将所学和前人的成果和经验结合,仅供学习和参考!!! 本文大部分源码内容有清晰的注释,请认真阅读! 通过线性布局和相对布局来搭建通讯录界面,界面效果如下图所示。创建布局文件contact_item.xml、导入界面图片、放置界面控件、创建条目界面的背景文件。创建

    2024年02月08日
    浏览(52)
  • MFC中不同编码格式内容的写入

    把CString中的内容写到UTF16LE中去,可以使用WriteString或者Write。 WriteString函数会把UNICODE字符串以UTF16LE编码格式写入,遇到空字符会提前结束 Write函数则不受空字符的影响,不会提前结束。 使用WriteString向UTF16LE中写入CString类型的文本。 WriteString在写入文本内容后可以指针定位在

    2024年02月22日
    浏览(38)
  • Vue3 Radio单选切换展示不同内容

    环境:vue3+ts+vite+element plus 技巧:v-if,v-show的使用 实现功能:点击单选框展示不同的输入框 效果实现前的代码: 1.默认选项型号是选中的,型号输入框也是展示的,那么颜色输入框是需要隐藏, 定义isShow, 此时,isShow是true,! isShow就是false了,显示如下 2.获取单选框选择的

    2024年02月15日
    浏览(37)
  • uniapp不同平台获取文件内容以及base64编码特征

    文件图片上传,客户端预览是很正常的需求,获取文件的md5特征码也是很正常的,那么,在uniapp中三种环境,h5, 小程序以及 app环境下,如何实现的? 参考: 如何在uniapp中读取文件ArrayBuffer和sha256哈希值,支持H5、APP、小程序 uniapp 没有提供跨平台的 API 来获取文件的 sha256 哈

    2024年02月20日
    浏览(38)
  • 为什么访问同一个网址却返回不同的内容

    哈喽大家好,我是咸鱼。今天给大家分享一个关于 HTTP 有趣的现象 链接:https://csvbase.com/meripaterson/stock-exchanges 我们用浏览器访问这个链接,可以看到下面的网页 但如果我们使用 curl 命令去访问这个链接呢? 可以看到返回的是一个 csv 文件 我们用 wget 命令下载下来看看 可以

    2024年02月03日
    浏览(66)
  • NVIDIA Edify 为视觉内容提供商解锁 3D 生成 AI 和新图像控件

    Shutterstock 3D 一代进入抢先体验阶段; Getty Images 为企业推出定制微调; Adobe 将为 Firefly 和 Creative Cloud 创作者带来 3D 生成人工智能技术; Be.Live、Bria 和 Cuebric 选择 NVIDIA Picasso AI Foundry 进行推理。 NVIDIA Edify 是一种用于视觉生成 AI 的多模式架构,正在进入一个新的维度。 3D 资

    2024年03月28日
    浏览(53)
  • LiveGBS GB28181流媒体平台中如何根据各种应用场景提供不同播放权限,满足用户自定义各种播放权限

    随着目前对信息安全的越来越重视,视频监控领域的视频流也需要做各种安全策略。视频监控流流媒体平台输出的直播流需要做权限限制,只允许哪些IP访问、只允许哪些用户访问等等各种权限限制。为了满足不同用户不同场景各种不同的播放权限需求,LiveGBS GB28181流媒体平

    2024年02月07日
    浏览(58)
  • 简单步骤:Android studio 内容提供者 - 实现建立手机通讯录界面,读取系统联系人

    提示:本篇文章将会尽量保持精简,同时请诸位敲写代码时保持耐心,三连是最大的支持! 文章目录 前言 一、项目介绍 二、使用步骤 1.创建程序 2.添加 recyclerview-v7 库 3.放置界面控件 4.搭建界面布局 5.封装实体类 6.编写数据适配器 7.实现显示界面数据功能 8.去掉默认标题栏

    2024年02月08日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包