Sard Uniapp

Appearance

在新窗口打开⤴

List列表

介绍 ​

显示一组垂直排列的数据。

引入 ​

js
import List from 'sard-uniapp/components/list/list.vue'
import ListItem from 'sard-uniapp/components/list-item/list-item.vue'

代码演示 ​

基础使用 ​

可以给列表项添加标题、描述和值。

vue
<template>
  <sar-list>
    <sar-list-item title="标题" />
    <sar-list-item title="标题" value="值" />
    <sar-list-item title="标题" value="值" description="描述" />
    <sar-list-item
      title="很长的标题标题标题标题标题标题标题标题标题标题标题标题"
      value="值值"
    />
    <sar-list-item
      title="标题"
      value="很长的值值值值值值值值值值值值值值值值值值值值值值值值"
    />
    <sar-list-item
      title="很长的标题标题标题标题标题标题标题标题"
      value="很长的值值值值值值值值值值值值值值值值"
      description="很长的描述描述描述描述描述描述描述描述"
    />
  </sar-list>
</template>

可链接的 ​

设置 arrow 属性会显示右边的箭头，设置 hover 属性会有点击状态。

vue
<template>
  <sar-list>
    <sar-list-item hover arrow title="标题" />
    <sar-list-item hover arrow title="标题" value="值" arrow-direction="down" />
  </sar-list>
</template>

图标 ​

设置 icon 属性或插槽可以在左边显示图标。

vue
<template>
  <sar-list>
    <sar-list-item
      title="下载"
      hover
      arrow
      icon="arrow-down-square-fill"
      icon-family="demo-icons"
      icon-color="#4994EC"
    ></sar-list-item>
    <sar-list-item
      title="订阅"
      hover
      arrow
      icon="rss-fill"
      icon-family="demo-icons"
      icon-color="#E78A3D"
    ></sar-list-item>
    <sar-list-item title="视频" hover arrow>
      <template #icon>
        <sar-icon
          family="demo-icons"
          name="caret-left-square-fill"
          color="#C24F4A"
        />
      </template>
    </sar-list-item>
  </sar-list>
</template>

自定义内容 ​

列表项的 body 和 footer 默认平分水平空间，如果 footer 需要占据更多的空间，可以设置 body 不扩展。

value 中的元素默认会向右边靠，如果有使用 footer 属性定义内容，则内容会纵向排列。

vue
<template>
  <sar-list>
    <sar-list-item title="标题">
      <template #value>
        <sar-switch :model-value="true" />
      </template>
    </sar-list-item>
    <sar-list-item arrow hover title="标题">
      <template #value>
        <sar-badge :value="20" />
      </template>
    </sar-list-item>
    <sar-list-item title="音量">
      <template #value>
        <sar-slider root-style="width: 600rpx" :value="50" />
      </template>
    </sar-list-item>

    <sar-list-item>
      <view
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20;
          gap: 10rpx;
        "
      >
        <image src="/static/logo.svg" style="width: 96rpx; height: 96rpx" />
        <view style="font-size: 40rpx">这是标题</view>
        <view>
          这是一段很长的描述这是一段很长的描述这是一段很长的描述这是一段很长的描述这是一段很长的描述这是一段很长的描述...
        </view>
      </view>
    </sar-list-item>
    <sar-list-item>
      <sar-input inlaid placeholder="请输入用户名" />
    </sar-list-item>
    <sar-list-item>
      <sar-input inlaid type="password" placeholder="请输入密码" />
    </sar-list-item>
  </sar-list>
</template>

列表标题和描述 ​

列表标题和描述可以对整个列表进行说明

vue
<template>
  <sar-list title="列表标题" description="列表描述">
    <sar-list-item title="标题" value="值" />
    <sar-list-item title="标题" value="值" />
  </sar-list>
</template>

卡片风格 ​

可以使用 card 属性让列表显示为卡片风格。

vue
<template>
  <sar-list title="列表标题" description="列表描述" card>
    <sar-list-item title="标题" value="值" />
    <sar-list-item title="标题" value="值" />
  </sar-list>
</template>

隐藏边框 1.21+ ​

可以使用 hide-border 属性隐藏边框。

vue
<template>
  <sar-list hide-border card>
    <sar-list-item title="标题" value="值" />
    <sar-list-item title="标题" value="值" />
    <sar-list-item title="标题" value="值" />
  </sar-list>
</template>

API ​

ListProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
title列表顶部标题string | number-
description列表底部描述string | number-
card卡片风格booleanfalse
inlaid嵌入式列表booleanfalse
hide-border 1.21+是否隐藏边框booleanfalse

ListSlots ​

插槽描述属性
default自定义默认内容-
title自定义标题内容，会覆盖title属性-
description自定义描述内容，会覆盖description属性-

ListItemProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
title左侧标题string | number-
description标题下方的描述string | number-
value右侧值string | number-
hover是否开启点击反馈booleanfalse
arrow是否展示右侧箭头booleanfalse
arrow-direction箭头方向'up' | 'right' | 'down''right'
icon左侧图标名称，可以为图片路径string-
icon-size图标尺寸string-
icon-color图标颜色string-
icon-family图标字体名称string-

ListItemSlots ​

插槽描述属性
default自定义默认内容，会覆盖所有内容-
title自定义标题内容，会覆盖title属性-
description自定义描述内容，会覆盖description属性-
value自定义值内容，会覆盖value属性-
arrow自定义箭头-
icon自定义左侧图标，会覆盖icon属性-

ListItemEmits ​

事件描述类型
click点击列表项时触发(event: any) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  // list
  --sar-list-border-color: var(--sar-border-color);

  --sar-list-title-margin-x: 32rpx;
  --sar-list-title-margin-top: 64rpx;
  --sar-list-title-margin-bottom: 16rpx;
  --sar-list-title-font-size: var(--sar-text-sm);
  --sar-list-title-line-height: var(--sar-leading-snug);
  --sar-list-title-color: var(--sar-tertiary-color);

  --sar-list-description-margin-x: 32rpx;
  --sar-list-description-margin-top: 16rpx;
  --sar-list-description-font-size: var(--sar-text-sm);
  --sar-list-description-line-height: var(--sar-leading-snug);
  --sar-list-description-color: var(--sar-tertiary-color);

  --sar-list-card-border-radius: var(--sar-rounded-lg);

  // item
  --sar-list-item-min-height: 88rpx;
  --sar-list-item-bg: var(--sar-emphasis-bg);

  --sar-list-item-padding-x: 32rpx;
  --sar-list-item-padding-y: 20rpx;

  --sar-list-item-active-bg: var(--sar-active-bg);
  --sar-list-item-disabled-opacity: var(--sar-disabled-opacity);

  --sar-list-item-icon-font-size: 40rpx;
  --sar-list-item-icon-margin-right: 24rpx;

  --sar-list-item-title-font-size: var(--sar-text-base);
  --sar-list-item-title-line-height: var(--sar-leading-snug);

  --sar-list-item-value-font-size: var(--sar-text-base);
  --sar-list-item-value-line-height: var(--sar-leading-snug);
  --sar-list-item-value-color: var(--sar-tertiary-color);

  --sar-list-item-description-margin-top: 8rpx;
  --sar-list-item-description-font-size: var(--sar-text-sm);
  --sar-list-item-description-line-height: var(--sar-leading-snug);
  --sar-list-item-description-color: var(--sar-tertiary-color);

  --sar-list-item-arrow-margin-left: 16rpx;
  --sar-list-item-arrow-font-size: var(--sar-text-base);
  --sar-list-item-arrow-color: var(--sar-tertiary-color);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao