选项卡 Segment

    选项卡需和segment-item两个组件关联使用。

    segment-item用于设置每一个选项的名称 ;

    segment 包裹在所有segment-item最外层 ,segment 下的所有 segment-item 属于同一个选项卡。

    默认为等宽选项卡，当选项卡数过多时可在segment上设置scrollable 为 true开启滚动标选项卡。

    默认激活的是第一个选项卡，通过在 segment 组件上设置 active-key的值为任意 key值配置初始状态时激活的选项卡。

    • tab是选项卡显示的文字；

    • key为每个选项卡的唯一标识，对应segment中的active-key；

    选项卡位置

    默认选项卡位置在顶部，可通过在segment上设置placement属性切换选项卡位置，可选值有 top/left/right/bottom。

    图标选项卡

    在segment-item上设置icon时，可以在选项卡上添加图标，默认图标大小为,颜色与字体颜色一致。

    使用image配置图片资源的样式，可配置项有：

    • activeImage：选中时的图片资源
    • picPlacement可以更改图片、图标的相对于文字的位置，默认为top

    徽标选项卡

    可在任意 segment-item上通过属性badge-count设置徽标的数值，不设置内容时徽标不显示，或者设置dotBadge=true时显示圆点徽标

    徽标相关的属性有，作用分别如下：

    • badge-max-count 设置徽标数字最大值，超过最大值时显示${max-count}+;
    • badge-count-type 数字的显示方式, 可选值为overflow、limit、custom,默认值为overflow。

    选项卡 Segment - 图2

    自定义选项卡

    使用 slot可以自定义选项卡的内容和样式 , 此时不能设置 tab 属性 , 否则会同时展示两者的内容。

    • 选项卡位置在顶部和底部时的默认高度为80rpx，宽度等分，开启scrollable时，最小宽度为160rpx;
    • 选项卡位置在左边或右边时，默认宽度为160rpx,高度等分,开启scrollable时，最小高度为80rpx;
    • 可通过l-class、l-class-active、覆盖默认选项卡样式。

    现象卡属性 (Segment Attributes）

    选项卡属性 (Segment-item Attributes）