Tasco Framework

Giao diện

Primitive — bố cục ​

Nhóm duy nhất giữ nguyên tên gốc của antdv, không có tiền tố C.

ts
import { Row, Col, Space, Flex, Divider, Typography, Layout } from '@tasco/ui'

Muốn tên đồng bộ với phần còn lại thì đặt bí danh khi import:

ts
import { Col as CCol, Row as CRow } from '@tasco/ui'

Lưới Row / Col ​

vue
<CRow :gutter="16">
  <CCol :xs="24" :md="12" :lg="8">…</CCol>
  <CCol :xs="24" :md="12" :lg="8">…</CCol>
</CRow>
  • Luôn khai điểm ngắt nhỏ nhất (:xs="24"), nếu không bố cục vỡ trên điện thoại.
  • gutter là khoảng cách giữa các cột; dùng số chẵn khớp thang 8px của hệ thống (8, 16, 24).
  • Tổng span trong một hàng là 24.

Space và Flex ​

vue
<Space :size="8">
  <CButton variant="outline">Huỷ</CButton>
  <CButton variant="primary">Lưu</CButton>
</Space>

Space cho một dãy phần tử cùng hàng có khoảng cách đều; Flex khi cần điều khiển justify / align chi tiết hơn. Bố cục phức tạp hơn nữa thì viết CSS của trang với biến --tasco-spacing-unit — xem Viết CSS trong dự án.

Divider ​

Ngăn hai nhóm nội dung trong cùng một khối. Đừng dùng thay cho khoảng trắng: khoảng cách đủ lớn đã tạo ranh giới, thêm đường kẻ chỉ làm trang ồn.

Typography ​

Dùng khi cần đoạn văn bản có kiểu (trích dẫn, chữ mờ, chữ gạch). Tiêu đề trang thì dùng CPageHeader; tiêu đề khối dùng title của CCard.

Layout ​

Primitive layout gốc của antd (Layout, Header, Sider, Content). Hầu như không cần: khung app đã có CAppLayout và layer dựng sẵn. Chỉ dùng cho khung cục bộ bên trong một trang, ví dụ trang có panel trái riêng.

Lưu ý ​

  • Bố cục trang nên bám lưới 24 cột của antd cho nhất quán giữa các màn hình.
  • Không đặt width cố định bằng pixel cho cột nội dung — dùng điểm ngắt.
  • Khoảng cách lấy từ --tasco-spacing-unit, không gõ số tuỳ ý.

Liên quan ​