Ionic - Lưới

Làm việc với Ionic Grid Systemlà đơn giản. Có hai lớp chính -row để làm việc với các hàng và col cho các cột.

Bạn có thể chọn bao nhiêu cột hoặc hàng tùy ý. Tất cả chúng sẽ điều chỉnh kích thước của nó để phù hợp với không gian có sẵn, mặc dù bạn có thể thay đổi hành vi này để phù hợp với nhu cầu của mình.

NOTE - Tất cả các ví dụ trong hướng dẫn này sẽ có đường viền được áp dụng cho lưới của chúng tôi để có thể hiển thị nó một cách dễ hiểu.

Lưới đơn giản

Ví dụ sau đây cho thấy cách sử dụng col và rowcác lớp học. Chúng tôi sẽ tạo hai hàng. Hàng đầu tiên sẽ có năm cột và hàng thứ hai sẽ chỉ có ba. Chú ý độ rộng của các cột ở hàng đầu tiên và hàng thứ hai khác nhau như thế nào.

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Kích thước cột

Đôi khi bạn không muốn để các kích thước cột được gán tự động. Nếu đúng như vậy, bạn có thể chọncol tiền tố theo sau là một số sẽ đại diện cho một phần trăm của rowchiều rộng. Điều này sẽ chỉ áp dụng cho cột có kích thước cụ thể được áp dụng. Các cột khác sẽ điều chỉnh theo không gian khả dụng còn lại.

Trong ví dụ sau, cột đầu tiên sẽ sử dụng 50 phần trăm chiều rộng đầy đủ và các cột khác sẽ điều chỉnh cho phù hợp.

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Bảng sau đây cho thấy các tùy chọn tỷ lệ phần trăm có sẵn mà hệ thống lưới Ionic cung cấp:

Cột Phần trăm Lớp học

Tên lớp	Phần trăm được sử dụng
col-10	10%
col-20	20%
col-25	25%
col-33	33,333%
col-50	50%
col-67	66,6666%
col-75	75%
col-80	80%
col-90	90%

Định vị ngang và dọc

Các cột có thể được bù đắp từ bên trái. Nó hoạt động giống nhau đối với kích thước cụ thể của các cột. Lần này tiền tố sẽ làcol-offsetvà sau đó chúng tôi sẽ sử dụng các số phần trăm tương tự được hiển thị trong bảng trên. Ví dụ sau đây cho thấy cách chúng ta có thể bù trừ cột thứ hai của cả hai hàng 25 phần trăm.

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Bạn cũng có thể căn chỉnh theo chiều dọc các cột bên trong một hàng. Có ba lớp, có thể được sử dụng, đó là:top, center và bottom lớp học với coltiếp đầu ngữ. Đoạn mã sau đây cho biết cách đặt ba cột đầu tiên của cả hai hàng theo chiều dọc.

NOTE - Trong ví dụ sau chúng tôi đã thêm “.col {height: 120px}” vào CSS của chúng tôi để cho bạn thấy vị trí thẳng đứng của các cột.

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

Đoạn mã trên sẽ tạo ra màn hình sau:

Lưới đáp ứng

Ionic Grid cũng có thể được sử dụng cho một bố cục đáp ứng. Có ba lớp học có sẵn. Cácresponsive-smlớp sẽ thu gọn các cột thành một hàng khi chế độ xem nhỏ hơn điện thoại ngang. Cácresponsive-mdsẽ được áp dụng khi chế độ xem nhỏ hơn máy tính bảng dọc. Cácresponsive-lg sẽ được áp dụng khi chế độ xem nhỏ hơn máy tính bảng ngang.

Hình ảnh đầu tiên sau ví dụ sau cho thấy cách responsive-sm lớp trông trên Thiết bị di động và lớp thứ hai cho biết cùng một lưới đáp ứng trông khác nhau như thế nào trên thiết bị Máy tính bảng.

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

Chế độ xem lưới di động

Chế độ xem lưới trên máy tính bảng