Chương ? TÊN CHƯƠNG CHƯƠNG 4 WORKING WITH STYLES AND LAYOUT PHÁT TRIỂN ỨNG DỤNG ĐA NỀN TẢNG TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT CÔNG NGHỆ Phone 0274 3834930 Website http //et tdmu edu vn NỘI DUNG[.]
TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT - CÔNG NGHỆ PHÁT TRIỂN ỨNG DỤNG ĐA NỀN TẢNG CHƯƠNG WORKING WITH STYLES AND LAYOUT Phone: 0274 3834930 Website: http://et.tdmu.edu.vn NỘI DUNG • React CSS • Layout and Flexbox 02/25/2023 1.React CSS 1.1 Style Sheet Style Sheet: phần trừu tượng hóa React Native để khai báo kiểu cách sử dụng ký hiệu đối tượng Các thành phần sử dụng kiểu nào, bạn thấy bạn khơng thể có giao diện phù hợp, tham khảo tài liệu React Native thành phần phần style 02/25/2023 1.React CSS Để tạo Style Sheet, sử dụng phương thức Stylesheet.create ({ }) cách truyền vào đối tượng đối tượng: 02/25/2023 1.React CSS Style khai báo thành phần cách sử dụng kiểu hỗ trợ 02/25/2023 1.React CSS 1.2 Styling the SimpleButton component - Trong phương thức kết xuất, đặt thuộc tính style thành phần View Text từ prop: 02/25/2023 1.React CSS 1.2 Styling the SimpleButton component Þ Từ dịng lệnh JavaScript ta hình bên 02/25/2023 1.React CSS 1.2 Styling the SimpleButton component React CSS khơng có khái niệm viết tắt, chẳng hạn border: 1px solid # 000 Thay vào đó, mục khai báo riêng lẻ Ví dụ: 02/25/2023 1.React CSS 1.2 Styling the SimpleButton component -Thực lệnh Javascript sau: 02/25/2023 1.React CSS 1.2 Styling the SimpleButton component - Sau thực lệnh Javascript 02/25/2023 10 2.Layout and Flexbox Flexbox thuộc tính giúp chỉnh vị trí tương đối thành phần thành phần cha, sử dụng thuộc tính flexDirection, alignItems justifyContent để thiết kế layout cho vị trí component Có đối tượng Flexbox: Đối tượng bao quanh (container) view cha Đối tượng bên (items) view 02/25/2023 11 2.Layout and Flexbox 2.1 Flexbox cho đối tượng cha (container) - flexDirection:Sắp xếp đối tượng theo column (chiều dọc) row (chiều ngang) giá trị : row column Mặc định column 02/25/2023 12 2.Layout and Flexbox - justifyContent: Căn vị trí tương đối đối tượng theo trục flex Gồm giá trị: flex-start, center, flex-end, space-around, space-between 02/25/2023 13 2.Layout and Flexbox - Flex-wrap : wrap | no-wrap: Thuộc tính cho phép container bọc items kích thước chúng vượt qua kích thước container Măc định no-wrap 02/25/2023 14 2.Layout and Flexbox 2.2 Flexbox cho đối tượng (items) - flex-grow: định nghĩa xem item dãn để lấp vào khoảng trống view cha 02/25/2023 15 2.Layout and Flexbox Ví dụ có view sau, tổng chiều rộng nhỏ view cha 02/25/2023 16 2.Layout and Flexbox Khi set flex-grow view thứ 1, chiều rộng cộng thêm khoảng trống để dàn hết view cha 02/25/2023 17 2.Layout and Flexbox Giữ nguyên giá trị view thứ nhất, ta set flex-grow view thứ Kết sau: chiều rộng view thứ cộng thêm phần khoảng trống thừa lần view thứ 02/25/2023 18 2.Layout and Flexbox - flex-shrink: Thuộc tính có phần ngược lại so với flex-grow, tổng item lớn view cha, thuộc tính định nghĩa tỉ lệ bị trừ 02/25/2023 19 Phone: 0274 3834930 Website: http://et.tdmu.edu.vn ... no-wrap 02/25/2023 14 2 .Layout and Flexbox 2.2 Flexbox cho đối tượng (items) - flex-grow: định nghĩa xem item dãn để lấp vào khoảng trống view cha 02/25/2023 15 2 .Layout and Flexbox Ví dụ có... rộng nhỏ view cha 02/25/2023 16 2 .Layout and Flexbox Khi set flex-grow view thứ 1, chiều rộng cộng thêm khoảng trống để dàn hết view cha 02/25/2023 17 2 .Layout and Flexbox Giữ nguyên giá trị view... 02/25/2023 18 2 .Layout and Flexbox - flex-shrink: Thuộc tính có phần ngược lại so với flex-grow, tổng item lớn view cha, thuộc tính định nghĩa tỉ lệ bị trừ 02/25/2023 19 Phone: 02 74 38 349 30 Website: