Scroll Area 滚动区域

<script setup lang="ts">
  import { ScrollArea } from 'moriui'
</script>

<template>
  <ScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4">
      <h4 class="mb-4 text-sm leading-none font-medium">
        用户服务协议
      </h4>
      <p class="mb-3 text-sm leading-relaxed">
        欢迎使用我们的服务。本协议是您与我们之间关于使用本服务的法律协议。请仔细阅读以下全部条款。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第一条 服务内容：我们提供包括但不限于数据存储、内容分发、技术支持等服务。具体服务内容以实际提供的为准。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第二条 用户义务：您在使用本服务时应遵守国家法律法规，不得利用本服务从事任何违法违规活动，不得侵犯他人合法权益。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第三条 知识产权：本服务包含的所有内容，包括但不限于文字、图片、软件、界面设计的知识产权归我们所有。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第四条 隐私保护：我们重视您的隐私，将按照隐私政策收集、使用和保护您的个人信息。未经您的同意，我们不会向第三方披露。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第五条 免责声明：因不可抗力或系统维护导致的服务中断，我们不承担责任，但将尽力减少影响。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第六条 协议变更：我们有权根据需要修改本协议，修改后的协议将在页面上公布。继续使用服务即视为接受修改。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第七条 争议解决：因本协议引起的争议，双方应友好协商解决；协商不成的，提交有管辖权的人民法院解决。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第八条 服务期限：本协议自您同意之日起生效，直至您或我们终止服务。终止后，您仍应履行终止前的义务。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第九条 账户安全：您应妥善保管账户信息和密码，因账户泄露造成的损失由您自行承担。建议定期更换密码。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第十条 第三方链接：服务中可能包含第三方网站链接，我们不对第三方内容负责。访问第三方链接风险自负。
      </p>
      <hr class="my-2 border-t">
      <p class="mb-3 text-sm leading-relaxed">
        第十一条 服务终止：如您违反本协议，我们有权终止您的服务，并不退还已支付的费用。
      </p>
    </div>
  </ScrollArea>
</template>

<script setup lang="ts">
  import { ScrollArea } from 'moriui'
</script>

<template>
  <ScrollArea class="w-96 rounded-md border whitespace-nowrap" orientation="horizontal">
    <div class="inline-flex gap-4 p-4">
      <div
        v-for="i in 6"
        :key="i"
        class="min-w-[12rem] shrink-0 rounded-md border p-4"
      >
        <div class="mb-3 h-32 rounded-md bg-neutral-100 dark:bg-neutral-800" />
        <p class="mb-1 text-sm font-medium">
          项目 {{ i }}
        </p>
        <p class="text-xs text-neutral-500 dark:text-neutral-400">
          描述文字第 {{ i }} 项
        </p>
      </div>
    </div>
  </ScrollArea>
</template>

<script setup lang="ts">
  import { DirectionProvider, ScrollArea } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <ScrollArea class="h-56 w-64 rounded-md border">
      <div class="p-4">
        <h4 class="mb-4 text-sm leading-none font-medium">
          اتفاقية خدمة المستخدم
        </h4>
        <p class="mb-3 text-sm leading-relaxed">
          مرحباً بك في خدمتنا. هذه الاتفاقية هي اتفاقية قانونية بينك وبيننا فيما يتعلق باستخدام هذه الخدمة.
        </p>
        <hr class="my-2 border-t">
        <p class="mb-3 text-sm leading-relaxed">
          المادة الأولى: محتوى الخدمة - نقدم خدمات تشمل تخزين البيانات وتوزيع المحتوى والدعم الفني. المحتوى المحدد يخضع لما يتم تقديمه فعلياً.
        </p>
        <hr class="my-2 border-t">
        <p class="mb-3 text-sm leading-relaxed">
          المادة الثانية: التزامات المستخدم - يجب عليك الامتثال للقوانين واللوائح الوطنية عند استخدام هذه الخدمة، ولا يجوز استخدامها لأي أنشطة غير قانونية.
        </p>
        <hr class="my-2 border-t">
        <p class="mb-3 text-sm leading-relaxed">
          المادة الثالثة: الملكية الفكرية - جميع محتويات هذه الخدمة، بما في ذلك النصوص والصور والبرامج وتصميم الواجهة، مملوكة لنا.
        </p>
        <hr class="my-2 border-t">
        <p class="mb-3 text-sm leading-relaxed">
          المادة الرابعة: حماية الخصوصية - نحن نقدر خصوصيتك وسنجمع ونستخدم ونحمي معلوماتك الشخصية وفقاً لسياسة الخصوصية.
        </p>
        <hr class="my-2 border-t">
        <p class="mb-3 text-sm leading-relaxed">
          المادة الخامسة: إخلاء المسؤولية - لسنا مسؤولين عن انقطاع الخدمة بسبب القوة القاهرة أو الصيانة، ولكننا سنبذل قصارى جهدنا لتقليل التأثير.
        </p>
      </div>
    </ScrollArea>
  </DirectionProvider>
</template>