SDivider <s-divider>

Một đường ngang hoặc dọc phân tách nội dung. SDivider là Vue 3 wrapper có type cho web component <s-divider> của Shopify Polaris.

import { SDivider } from 'polaris-vue-elements'

Best practices

• Chỉ phân tách nội dung thực sự khác nhau. Divider chỉ đáng dùng giữa các phần rõ ràng là khác biệt. Dùng quá nhiều khiến giao diện trông rối và rời rạc, vì vậy hãy xem khoảng trắng có nhóm nội dung tốt không kém hay không.
• Chọn độ đậm tương xứng với mức phân tách. Để độ nổi bật của divider phản ánh mức quan trọng của sự phân tách: một ranh giới lớn giữa các phần có thể dùng color="strong", còn một nhóm nhỏ chỉ cần đường mảnh hơn hoặc chỉ cần khoảng trống.
• Theo hướng của bố cục. Đặt direction để đường kẻ chạy cắt ngang dòng nội dung mà nó phân tách, giữa các mục xếp theo chiều dọc hoặc giữa các mục nằm cạnh nhau.
• Thử khoảng cách trước. Các prop khoảng cách trên component bố cục thường nhóm nội dung gọn gàng hơn một đường kẻ. Hãy thêm divider để làm mọi thứ rõ ràng hơn, không phải để thay thế cho khoảng cách được tính toán kỹ.

Xem best practices của Shopify cho <s-divider> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Kiểu	Mô tả
color	"base" | "strong"	Độ nổi bật trực quan của đường phân cách. - base: Đường phân cách tiêu chuẩn cho hầu hết các phân tách (mặc định) - strong: Đường phân cách nổi bật hơn cho việc ngắt các phần lớn
direction	"block" | "inline"	Hướng của đường phân cách, dùng thuộc tính logic. - inline: Đường phân cách ngang để tách các nội dung xếp chồng theo chiều dọc - block: Đường phân cách dọc để tách các nội dung sắp xếp theo chiều ngang