<Col/> properties
| Prop | Type | Default | Description |
|---|
| tag | string | div | Xác định html tag mà Col element sẽ render |
| width | number | string | auto | Kích thước chiều rộng column. Xem thêm kích thước columns hợp lệ tại đây |
| xsmall | number | string | | Kích thước chiều rộng column khi app width >= 480px |
| small | number | string | | Kích thước chiều rộng column khi app width >= 568px |
| medium | number | string | | Kích thước chiều rộng column khi app width >= 768px |
| large | number | string | | Kích thước chiều rộng column khi app width >= 1024px |
| xlarge | number | string | | Kích thước chiều rộng column khi app width >= 1200px |
<Col/> events
| Event | Description |
|---|
| onGridResize | Event kích hoạt khi column thay đổi kích thước |
Column Sizes
Kích thước columns hợp lệ:
| Class | xsmall width >= 480px | small width >= 568px | medium width >= 768px | large width >= 1024px | xlarge width >= 1200px | Width |
|---|
| col-5 | xsmall-5 | small-5 | medium-5 | large-5 | xlarge-5 | 5% |
| col-10 | xsmall-10 | small-10 | medium-10 | large-10 | xlarge-10 | 10% |
| col-15 | xsmall-15 | small-15 | medium-15 | large-15 | xlarge-15 | 15% |
| col-20 | xsmall-20 | small-20 | medium-20 | large-20 | xlarge-20 | 20% |
| col-25 | xsmall-25 | small-25 | medium-25 | large-25 | xlarge-25 | 25% |
| col-30 | xsmall-30 | small-30 | medium-30 | large-30 | xlarge-30 | 30% |
| col-33 | xsmall-33 | small-33 | medium-33 | large-33 | xlarge-33 | 33.333333333333336% |
| col-35 | xsmall-35 | small-35 | medium-35 | large-35 | xlarge-35 | 35% |
| col-40 | xsmall-40 | small-40 | medium-40 | large-40 | xlarge-40 | 40% |
| col-45 | xsmall-45 | small-45 | medium-45 | large-45 | xlarge-45 | 45% |
| col-50 | xsmall-50 | small-50 | medium-50 | large-50 | xlarge-50 | 50% |
| col-55 | xsmall-55 | small-55 | medium-55 | large-55 | xlarge-55 | 55% |
| col-60 | xsmall-60 | small-60 | medium-60 | large-60 | xlarge-60 | 60% |
| col-65 | xsmall-65 | small-65 | medium-65 | large-65 | xlarge-65 | 65% |
| col-66 | xsmall-66 | small-66 | medium-66 | large-66 | xlarge-66 | 66.66666666666666% |
| col-70 | xsmall-70 | small-70 | medium-70 | large-70 | xlarge-70 | 70% |
| col-75 | xsmall-75 | small-75 | medium-75 | large-75 | xlarge-75 | 75% |
| col-80 | xsmall-80 | small-80 | medium-80 | large-80 | xlarge-80 | 80% |
| col-85 | xsmall-85 | small-85 | medium-85 | large-85 | xlarge-85 | 85% |
| col-90 | xsmall-90 | small-90 | medium-90 | large-90 | xlarge-90 | 90% |
| col-95 | xsmall-95 | small-95 | medium-95 | large-95 | xlarge-95 | 95% |
| col-100 | xsmall-100 | small-100 | medium-100 | large-100 | xlarge-100 | 100% |
| col | xsmall-auto | small-auto | medium-auto | large-auto | xlarge-auto | Equal width |
Ví dụ
Code demo fallback when rendering server side!