- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

0 0 47

Người đăng: Tran Cong Hanh

Theo Viblo Asia

Giới thiệu

Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng. Cái này nó như 1 dạng template có code sẵn mọi người có thể tham khảo rút ngắn được thời gian code Frontend.

UI component & layout

CSS Layout

Ưu điểm của CSS layout :

  1. Không liên quan ảnh hưởng 1 chút gì tới style đang có sẵn
  2. Không cần framework
  3. Làm bằng CSS đơn giản nhất vì vậy không có bug
  4. Dùng được với những CSS mới nhất ví dụ như Flexbox
  5. Có ví dụ thực tế
  6. Có thể dùng miễn phí bằng MITライセンス

Patterns -CSS Layout

Ưu điểm của Patterns -CSS Layout

  1. Sử dụng code từ demo
  2. Ở button phía trên bên phải có thể chuyển đổi qua lại được từ source code và demo

Same column height

<div style="display: flex;"> <!-- Column --> <div style="
 flex: 1;
 /* Space between columns */
 margin: 0 8px;
 
 /* Layout each column */
 display: flex;
 flex-direction: column;
 "> <!-- Cover --> ... <!-- Content --> <div style="
 /* Take available height */
 flex: 1;
 "> ... </div> <!-- Button sticks to the bottom --> ... </div> <!-- Repeat with other columns --> ...
</div>

Sticky table headers

<table> <thead> <tr> <th style="
 /* Background color */
 background-color: #ddd;  /* Stick to the top */
 position: sticky;
 top: 0;  /* Displayed on top of other rows when scrolling */
 z-index: 9999;
 "> ... </th> <!-- Repeat other header column ... --> </tr> </thead> <tbody> </tbody>
</table>

Lời kết

Với những layout và UI component có sẵn các bạn có thể copy/ pase tham khảo sẽ rút ngắn được nhiều thời gian cho việc viết giao diện của mình, hi vọng sẽ giúp ích cho các bạn trong công việc, nâng cao hiệu suất và tiết kiệm được nhiều thời gian.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Một số quy tắc và name class phổ biến cho Front-end Dev

Trong CSS, các thủ tục setting đóng vai trò to lớn, nhưng bên cạnh đó, cách đặt tên theo các từ đơn sao cho phù hợp cũng quan trọng không kém . Đặt tên rất khó, nhưng cũng rất quan trọng .

0 0 78

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 43

- vừa được xem lúc

Tài nguyên nghiên cứu sâu Html

1. Articles and standards. . HTML 5.

0 0 182

- vừa được xem lúc

Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

Chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:. . Event.preventDefault().

0 0 36

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 49

- vừa được xem lúc

Thủ thuật nhỏ để căn chỉnh image với object-fit

Chào các bạn,. Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm.

0 0 33