Các bài viết có chức năng tab bổ sung trên Median UI template

Artikel Dengan Tambahan Fungsi Tabs
Source: jagodesain.com

Thông tin: Giờ đây, bạn có thể thêm tối đa 5 tab trong một bài đăng

Tính năng tùy chọn này được sử dụng để chia bài viết thành hai, trong ví dụ này, bài báo được chia thành hai ngôn ngữ. Cần lưu ý rằng bài đăng này không phải là một bản dịch tự động, mà bạn tạo hai bài viết bằng các ngôn ngữ khác nhau được thống nhất trong một bài đăng.

Cách các tab hoạt động trong bài đăng

Tab này giống với tính năng tab thông thường, chúng tôi sử dụng CSS Pseudo ::checked và thẻ <input> trong HTML làm cơ sở, có nghĩa là tính năng này rất nhẹ vì nó hoàn toàn không sử dụng javascript. Một điều tốt nữa là bạn có thể sử dụng tính năng này trên phiên bản AMP.

Nó không nhất thiết phải là các bài báo bằng hai ngôn ngữ, bạn cũng có thể chia bài viết của mình thành hai phần bằng cách sử dụng tính năng này trong trường hợp bài viết của bạn quá dài.

Hướng dẫn và ứng dụng đúng

Để sử dụng mẫu này, bạn nên viết ở chế độ 'Chế độ xem HTML' vì các tab có thể không hoạt động nếu bạn viết không phải ở chế độ HTML.

Trong gói file đã cung cấp sẵn mẫu, bạn chỉ việc copy vào và thêm vào bài viết của mình những phần đã có dấu, mã mẫu như bên dưới:

  <div class='post-tabsContent'>
    <div class='tabsContent-1'>

      <!-- Điền vào nội dung tab đầu tiên tại đây -- >
      
    </div>
    <div class='tabsContent-2'>

      <!-- Điền vào nội dung tab tiếp theo tại đây -->
      
    </div>
  </div>

Info: Now you can add a maximum of 5 tabs in one post

This optional feature is used to split the article into two, in this example the article is divided into two languages. It should be noted that this post is not an auto translate, but you create two articles in different languages that are united in one post.

How tabs work in posts

This tab is the same as the tabs feature in usual, we make use of CSS Pseudo ::checked and the <input> tag in HTML as the base which means this feature is very light because it does not use javascript at all. Another good thing is that you can use this feature on the AMP version.

It doesn't have to be articles in two languages, you can also divide your articles into two parts using this feature in case your articles are too long.

Correct tutorial and application

To use this template it is highly recommended that you write in 'HTML View' mode because tabs may not work if you write not in HTML mode.

In the file bundle has provided a ready-made template, you only need to copy it and add your article on the parts that have been on the mark, sample code as below:

  <div class='post-tabsContent'>
    <div class='tabsContent-1'>

      <!-- Fill in the first article here -- >
      
    </div>
    <div class='tabsContent-2'>

      <!-- Fill in the first article here -->
      
    </div>
  </div>