Material UI

1. Material UI

• Là thư viện được phát triển bởi Google

2. Thiết kế UI

Vấn đề thiết kế UI như hình ?

Vậy phải làm những bước gì để thiết kế website này ?

Nguyên tắc 1 : GUI sẽ gồm hai phần - Layout: khung cột trụ trang web - Component: các thành phần nhỏ Nguyên tắc 2: kết hợp sử dụng cây component, UI

Ví dụ : landing page

Ví dụ: Zalo Page

3. Layouts

Nhiệm vụ của Layout là định hình cho websites và responsibility

3.1 Layout cơ bản trong MUI

• Box

• Container

• Grid

3.2 Display CSS

Inline and block CSS

3.3 Flex Box

• flex direction

• flex wrap

• justify-content (ngang)

• align-items (dọc)

• others: flex grow

3.4 CSS Grid

3.5 CSS Positions

• z index

• position : static, relative

• exact position

3.6 CSS Responsive

• Display CSS : hiding elements

• Size (12 column): xs sm md lg lg xl

• Sizing (column): width, height

3.7 Scrollable UI

• Pager component

• autoflow : auto

3.8 Sizing

Các đơn vị trong HTML

https://viblo.asia/p/css-units-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-Az45brNV5xY

• vh : view port

• %

• px

• pt

• rem

• em

5. @media

Chia theo xs sm md lg xl

Chia kích thước màn hình

4. Components

• Inputs

• Display data

• Table

5. Trường phái thiết kế

5.1 Layout first

Sử dụng kỹ thuật flex để thiết kế content bên trong.

5.2 Content first