Tui

<template>
  <div class="scroll-area-base-demo">
    <div class="demo-shell">
      <TsScrollArea :always-visible="false" :bar-size="8">
        <div class="demo-list">
          <div v-for="item in list" :key="item.id" class="demo-item">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </TsScrollArea>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsScrollArea } from 'tui';

const list = Array.from({ length: 18 }).map((_, index) => ({
  id: index + 1,
  title: `消息记录 #${String(index + 1).padStart(2, '0')}`,
  desc: `这是用于演示 TsScrollArea 纵向滚动的内容，序号 ${index + 1}`,
}));
</script>

<style scoped>
.scroll-area-base-demo {
  width: 100%;
}

.demo-shell {
  height: 236px;
  border: 1px solid var(--bussiness-doc-border, #e8e8e8);
  border-radius: 6px;
  background: var(--bussiness-doc-surface, #fff);
  overflow: hidden;
}

.demo-list {
  padding: 6px 8px 6px 10px;
}

.demo-item {
  padding: 10px 12px;
  border-bottom: 1px dashed var(--bussiness-doc-border, #e8e8e8);
}

.demo-item:last-child {
  border-bottom: none;
}

.item-title {
  font-size: 13px;
  color: var(--bussiness-doc-text-primary, #333);
  font-weight: 600;
}

.item-desc {
  margin-top: 5px;
  font-size: 12px;
  color: var(--bussiness-doc-text-secondary, #666);
}
</style>

<template>
  <div class="scroll-area-horizontal-demo">
    <div class="demo-shell">
      <TsScrollArea axis="x" :bar-size="8" always-visible>
        <div class="card-track">
          <div v-for="item in cards" :key="item.id" class="card-item">
            <div class="card-title">{{ item.title }}</div>
            <div class="card-desc">{{ item.desc }}</div>
          </div>
        </div>
      </TsScrollArea>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsScrollArea } from 'tui';

const cards = Array.from({ length: 12 }).map((_, index) => ({
  id: index + 1,
  title: `横向卡片 ${index + 1}`,
  desc: 'axis="x"',
}));
</script>

<style scoped>
.scroll-area-horizontal-demo {
  width: 100%;
}

.demo-shell {
  height: 136px;
  border: 1px solid var(--bussiness-doc-border, #e8e8e8);
  border-radius: 6px;
  background: var(--bussiness-doc-surface, #fff);
  overflow: hidden;
}

.card-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 24px 10px;
  width: max-content;
}

.card-item {
  width: 160px;
  min-width: 160px;
  height: 92px;
  border: 1px solid var(--bussiness-doc-border, #e8e8e8);
  border-radius: 6px;
  background: var(--bussiness-doc-panel-bg, #f8f9fa);
  padding: 10px 12px;
}

.card-title {
  font-size: 13px;
  color: var(--bussiness-doc-text-primary, #333);
  font-weight: 600;
}

.card-desc {
  margin-top: 8px;
  font-size: 12px;
  color: var(--bussiness-doc-text-secondary, #666);
}
</style>