Bài viết hôm sẽ giới thiệu về các component tab được xây dựng bằng CSS, Javascript giúp quá trình phát triển và thiết kế web của bạn được tốt hơn cũng như nâng cao trải nghiệm người dùng khi sử dụng website. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu các component tab được sử dụng phổ biến trong năm 2020 nhé!
Vậy component tab là gì? Có nhiệm vụ như thế nào trong trang web?
Component tab là một yếu tố điều hướng đước sử dụng trong trang web giúp người dùng có thể dễ dàng truy cập những nội dung khác nhau thông qua việc click vào các tiêu đề ở trên component tab. Nó giúp bạn có thể tối ưu được tỉ lệ chiếm trang của các thành phần trong trang web với mục đích chính là giúp người dùng có thể khái quát được nội dung ta muốn truyền đạt cũng như việc hiển thị trên những thiết bị như điện thoại được ngăn nắp và gọn gàng hơn.
Một số lưu ý khi bạn sử dụng component tab là:
- Phải hiển thị tab nào đang được active để người dùng có thể xác định được vị trí của mình đang ở nội dung nào.
- Nên hiển thị các tiêu đề tab cùng nằm trên một hàng.
- Sử dụng từ ngữ ngắn gọn và xúc tích nhất có thể cho tiêu đề của từng tab.
- Các tiêu đề đề phải có liên quan đến một chủ đề nào đó.
- Tránh tình trạng tải lại trang khi người dùng chuyển sang các tab khác.
Để dễ hình dung hơn bạn xem ví dụ sau đây nhé:
Navbar Nudging w/ Chris Coyier
See the Pen Navbar Nudging w/ Chris Coyier | Three Person Collaborative Animation Tutorial | @keyframers 2.14.0 by @keyframers (@keyframers) on CodePen.
Tabby Tabs
See the Pen Tabby Tabs by SC (@Sarah_C) on CodePen.
CSS Tabs
See the Pen CSS Tabs by Eric Sadowski (@ejsado) on CodePen.
Tabs. Pitaya CSS
See the Pen Tabs. Pitaya CSS by Flkt Crnpio (@flkt-crnpio) on CodePen.
Scroll for Tabs
See the Pen Scroll for Tabs by Praveen Kumar Gorakala (@onlyveen) on CodePen.
Material Design CSS Only Tabs
See the Pen Material Design CSS Only Tabs by Ben Mildren (@mildrenben) on CodePen.
Pure CSS Tabs
See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.
CSS3 Tabs by Sorax
See the Pen CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi) on CodePen.
Flying cards tabs
See the Pen Flying cards tabs by Biliana (@interstellar) on CodePen.
Light & Sexy Tabs
See the Pen Light & Sexy Tabs by Alex Lime (@CoffeeCupDrummer) on CodePen.
Featured Tabs
See the Pen Featured Tabs by Richard Gonyeau (@RGonyeau) on CodePen.
Toggle Tabs
See the Pen Toggle Tabs by Derek Palladino (@derekjp) on CodePen.
Daily UI #007 | Settings
See the Pen Daily UI #007 | Settings by Julie Park (@juliepark) on CodePen.
CSS TABS
See the Pen CSS TABS by Ramnek Singh (@Ramnk7) on CodePen.
Tab bar active animation #2
See the Pen Tab bar active animation #2 by Aaron Iker (@aaroniker) on CodePen.
Tab UI
See the Pen Tab UI by Hilo (@hilotacker) on CodePen.
Tabs
See the Pen Tabs by Nikita Jadhao (@jdniki) on CodePen.
Tabs - CSS + JS
See the Pen Tabs - CSS + JS by Rafaela Lucas (@rafaelavlucas) on CodePen.
Pure CSS Tabs With Indicator
See the Pen Pure CSS Tabs With Indicator by Alex (@woranov) on CodePen.
Vertical tabs with smooth animation
See the Pen Vertical tabs with smooth animation by Benjamin Koehler (@Benny29390) on CodePen.
No JS: Tabs that scale down to menu
See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.
Responsive Flexbox Tabs / Accordion - CSS Only
See the Pen Responsive Flexbox Tabs / Accordion - CSS Only by Josh Vogt (@josh_vogt) on CodePen.
3D Cube for tabbed content
See the Pen 3D Cube for tabbed content by Kara Olthof (@raevenk) on CodePen.
Pure CSS Tab Navigation
See the Pen Pure CSS Tab Navigation by Izzy Skye (@chrysokitty) on CodePen.
Pure CSS responsive tabset with dynamic height
See the Pen Pure CSS responsive tabset with dynamic height by JamieKDonnelly (@JamieKDonnelly) on CodePen.
Tabs from Codyhouse
See the Pen Tabs from Codyhouse by Gigg Hemwattakit (@gigghem) on CodePen.
Pure CSS tabs
See the Pen Pure CSS tabs by Jay Pick (@japick) on CodePen.
Features tabs with click css-animation
See the Pen Features tabs with click css-animation by Danil Goncharenko (@Danil89) on CodePen.
Responsive pure css tabs
See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.
responsive tabs, no JS
See the Pen Accessible(?) and responsive tabs, no JS by Poppe1219 - Frontend and Backend Developer (@poppe1219) on CodePen.
Tabs
See the Pen Tabs by Axelaredz (@axelaredz) on CodePen.
Animated Content Tabs with CSS3
See the Pen Animated Content Tabs with CSS3 by Angel Komander (@AngelKrak) on CodePen.
just another Css tabs (:checked)
See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen.
CSS Tabs Revisited
See the Pen CSS Tabs Revisited by Eric Sadowski (@ejsado) on CodePen.
Stretchy Tab & Springy Content Slider w/bursts
See the Pen Stretchy Tab & Springy Content Slider w/bursts by Craig Roblewsky (@PointC) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những component tab hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!