Trang này được dịch bởi Cloud Translation API.

Hướng dẫn về biểu tượng Material

Thông tin tổng quan về biểu tượng Material: nơi tìm và cách tích hợp biểu tượng với dự án.

Biểu tượng Material là gì?

Biểu tượng hệ thống thiết kế Material Design đơn giản, hiện đại, thân thiện và đôi khi khác lạ. Mỗi biểu tượng được tạo dựa trên các nguyên tắc thiết kế của chúng tôi để mô tả các khái niệm phổ biến thường dùng trên giao diện người dùng ở các dạng đơn giản và tối thiểu. Để đảm bảo tính dễ đọc và rõ ràng ở cả kích thước lớn và nhỏ, các biểu tượng này đã được tối ưu hoá để hiển thị đẹp mắt trên tất cả các nền tảng và độ phân giải màn hình phổ biến.

Xem bộ đầy đủ các biểu tượng Material Design trong Thư viện biểu tượng Material.

Lấy biểu tượng

Các biểu tượng có sẵn ở nhiều định dạng và phù hợp với nhiều loại dự án và nền tảng, với nhà phát triển trong ứng dụng và nhà thiết kế trong bản minh hoạ hoặc nguyên mẫu.

Cấp phép

Chúng tôi đã cung cấp các biểu tượng này để bạn kết hợp vào sản phẩm theo Giấy phép Apache phiên bản 2.0. Đừng ngại phối lại và chia sẻ lại các biểu tượng cũng như tài liệu này trong sản phẩm của bạn. Bạn không bắt buộc phải hiển thị phần phân bổ trong màn hình about của ứng dụng.

Duyệt qua và tải từng biểu tượng xuống

Bộ biểu tượng Material hoàn chỉnh có sẵn trên thư viện biểu tượng Material. Các biểu tượng có sẵn để tải xuống ở định dạng SVG hoặc PNG, ở định dạng phù hợp với các dự án web, Android và iOS hoặc để đưa vào bất kỳ công cụ thiết kế nào.

Đang tải mọi tệp xuống

Tải bản lưu trữ zip ổn định mới nhất (~310MB) của tất cả các biểu tượng hoặc phiên bản tràn viền từ tệp chính.

Kho lưu trữ Git

Các biểu tượng Material có sẵn trong kho lưu trữ git chứa bộ biểu tượng hoàn chỉnh, bao gồm tất cả các định dạng mà chúng tôi đang cung cấp.

$ git clone https://github.com/google/material-design-icons/

Phông chữ biểu tượng dành cho web

Phông chữ biểu tượng Material là cách dễ nhất để kết hợp biểu tượng Material với các dự án web. Chúng tôi đã đóng gói tất cả biểu tượng Material vào một phông chữ duy nhất để tận dụng khả năng kết xuất kiểu chữ của các trình duyệt hiện đại. Nhờ đó, nhà phát triển web có thể dễ dàng kết hợp các biểu tượng này chỉ bằng một vài dòng mã.

Sử dụng phông chữ không chỉ là phương thức thuận tiện nhất, mà còn hiệu quả và trông tuyệt vời:

Hơn 900 biểu tượng trong một tệp nhỏ và duy nhất.
Được phân phát từ máy chủ Google Web Font hoặc có thể tự lưu trữ.
Được tất cả trình duyệt web hiện đại hỗ trợ.
Được tô màu, định kích thước và định vị hoàn toàn bằng CSS.
Dựa trên vectơ: Giao diện đẹp mắt ở mọi quy mô, màn hình retina, màn hình hiển thị có độ phân giải dpi thấp.

Phông chữ biểu tượng chỉ nặng 42KB ở định dạng woff2 nhỏ nhất và 56KB ở định dạng woff tiêu chuẩn. Để so sánh, các tệp SVG được nén bằng gzip thường có kích thước khoảng 62 KB, nhưng có thể giảm đáng kể bằng cách chỉ biên dịch các biểu tượng mà bạn cần thành một tệp SVG duy nhất với các biểu tượng sprite.

Phương thức thiết lập 1. Sử dụng qua Google Fonts

Cách dễ nhất để thiết lập phông chữ biểu tượng để dùng trong mọi trang web là thông qua Google Fonts. Tất cả những gì bạn cần làm là thêm một dòng HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Tương tự như các Phông chữ web khác của Google, CSS chính xác sẽ được phân phát để kích hoạt phông chữ "Biểu tượng Material" dành riêng cho trình duyệt. Một lớp CSS bổ sung sẽ được khai báo có tên là .material-icons. Mọi phần tử sử dụng lớp này đều sẽ có CSS chính xác để hiển thị các biểu tượng này từ phông chữ trên web.

Phương thức thiết lập 2. Tự lưu trữ

Đối với những người muốn tự lưu trữ phông chữ trên web, sẽ cần đến một số thiết lập bổ sung. Lưu trữ phông chữ biểu tượng ở một vị trí, ví dụ: https://example.com/material-icons.woff và thêm quy tắc CSS sau đây:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Ngoài ra, bạn cần khai báo các quy tắc CSS để hiển thị biểu tượng để hiển thị phông chữ đúng cách. Những quy tắc này thường được phân phát như một phần của biểu định kiểu Phông chữ web của Google, nhưng bạn cần đưa vào dự án theo cách thủ công khi tự lưu trữ phông chữ:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Sử dụng các biểu tượng trong HTML

Bạn có thể dễ dàng kết hợp các biểu tượng vào trang web của mình. Sau đây là một ví dụ nhỏ:

khuôn mặt

face

Ví dụ này sử dụng một tính năng kiểu chữ có tên là ghép nối, cho phép hiển thị ký tự biểu tượng chỉ bằng cách sử dụng tên văn bản. Việc thay thế được trình duyệt web thực hiện tự động và cung cấp mã dễ đọc hơn so với tham chiếu ký tự số tương đương.

Tính năng này được hỗ trợ trong hầu hết các trình duyệt hiện đại trên cả máy tính và thiết bị di động.

Trình duyệt	Phiên bản hỗ trợ dấu gạch nối
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Microsoft Edge	18
Opera	15
MobileSafari của Apple	iOS 4.2
Trình duyệt Android	3.0

Đối với các trình duyệt không hỗ trợ dấu gạch nối, hãy quay lại chỉ định biểu tượng bằng cách tham chiếu ký tự số như ví dụ dưới đây:

Bình thường



Tìm cả tên biểu tượng và điểm mã trên thư viện biểu tượng Material bằng cách chọn một biểu tượng bất kỳ rồi mở bảng điều khiển phông chữ của biểu tượng. Mỗi phông chữ biểu tượng có một chỉ mục điểm mã trong kho lưu trữ git của chúng tôi cho thấy toàn bộ tên và mã ký tự (tại đây).

Tạo kiểu biểu tượng trong Material Design

Các biểu tượng này được thiết kế để tuân thủ các nguyên tắc thiết kế Material Design và trông đẹp nhất khi sử dụng màu và kích thước biểu tượng được đề xuất. Các kiểu dưới đây giúp bạn dễ dàng áp dụng kích thước, màu sắc và trạng thái hoạt động được đề xuất.

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Kích thước

Mặc dù biểu tượng trong phông chữ có thể điều chỉnh được theo tỷ lệ bất kỳ kích thước nào, nhưng theo nguyên tắc về biểu tượng thiết kế Material Design, bạn nên hiển thị biểu tượng ở kích thước 18, 24, 36 hoặc 48px. Giá trị mặc định là 24 px.

Quy tắc CSS cho nguyên tắc định kích thước tiêu chuẩn của Material Design:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Biểu tượng Material trông đẹp nhất ở 24px, nhưng nếu một biểu tượng cần được hiển thị ở kích thước thay thế, thì việc sử dụng các quy tắc CSS ở trên có thể giúp ích:

18px

face

24px

face

36px

face

48px

face

Tô màu

Việc sử dụng phông chữ biểu tượng giúp biểu tượng dễ dàng tạo kiểu bằng bất kỳ màu nào. Theo nguyên tắc về biểu tượng Material Design, đối với biểu tượng đang hoạt động, bạn nên sử dụng màu đen có độ mờ 54% hoặc màu trắng có độ mờ 100% khi hiển thị biểu tượng này trên nền sáng hoặc tối tương ứng. Nếu một biểu tượng bị tắt hoặc không hoạt động, hãy sử dụng màu đen ở mức 26% hoặc màu trắng ở mức 30% cho nền sáng và tối tương ứng.

Dưới đây là một số ví dụ sử dụng các kiểu CSS Material được mô tả ở trên:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Ví dụ về cách vẽ biểu tượng trên nền sáng có màu nền trước là tối:

Bình thường

face

Đã tắt

face

Ví dụ về cách vẽ biểu tượng trên nền tối có màu nổi bật:

Bình thường

face

Đã tắt

face

Để đặt màu biểu tượng tùy chỉnh, hãy xác định quy tắc CSS chỉ định màu mong muốn cho phông chữ:

.material-icons.orange600 { color: #FB8C00; }

rồi sử dụng lớp này khi tham chiếu đến biểu tượng:

Bình thường

face

Hình ảnh biểu tượng cho web

Biểu tượng Material cũng có sẵn dưới dạng hình ảnh thông thường, ở cả định dạng PNG và SVG.

SVG

Các biểu tượng Material được cung cấp dưới dạng SVG phù hợp với các dự án web. Bạn có thể tải từng biểu tượng xuống từ thư viện biểu tượng material. SVG cũng có sẵn trong kho lưu trữ git biểu tượng Material Design theo đường dẫn:

material-design-icons/src/

Ví dụ: biểu tượng cho bản đồ nằm trong src/maps:

material-design-icons/src/maps/

Nếu nhiều biểu tượng đang được sử dụng trên một trang web, bạn nên tạo các trang tính lớn từ các hình ảnh. Để biết thêm thông tin, hãy tham khảo tài liệu trong thư mục sprite của kho lưu trữ git.

PNG

PNG là cách truyền thống nhất để hiển thị các biểu tượng trên web. Các tệp tải xuống của chúng tôi từ thư viện biểu tượng material cung cấp cả mật độ đơn và mật độ kép cho mỗi biểu tượng. Chúng được gọi lần lượt là 1x và 2x trong tệp tải xuống. Các biểu tượng cũng có sẵn trong kho lưu trữ git dưới đây:

material-design-icons/png/

Nếu nhiều biểu tượng đang được sử dụng trên một trang web, bạn nên tạo các trang tính lớn từ các hình ảnh. Để biết thêm thông tin, hãy tham khảo các đề xuất trong thư mục sprite trong kho lưu trữ git.

Biểu tượng dành cho Android

Các tệp PNG phù hợp với Android có trong thư viện biểu tượng Material. Các màn hình này có tất cả mật độ màn hình được hỗ trợ, vì vậy, chúng hiển thị đẹp trên mọi thiết bị.

Các biểu tượng cũng có trong kho lưu trữ git biểu tượng Material Design cùng tổ hợp màu sắc và kích thước có tên như sau:

Vectơ vẽ được hiện chỉ có ở dạng biểu tượng màu đen 24dp. Điều này là để tương thích với kích thước biểu tượng chuẩn nhất của chúng tôi. Để hiển thị biểu tượng ở màu khác, hãy sử dụng tính năng phủ màu có thể vẽ được trên Android Lollipop.

Khi sử dụng Vectơ vẽ được, bạn có thể không cần phải bao gồm PNG có mật độ xxxhdpi vì không có khả năng thiết bị hỗ trợ mật độ màn hình đó không hỗ trợ Vectơ vẽ được.

Biểu tượng dành cho iOS

Biểu tượng Material cũng hoạt động tốt trong các ứng dụng iOS. Trong cả thư viện biểu tượng Material và kho lưu trữ git, các biểu tượng này được đóng gói trong tập hợp hình ảnh Xcode và sẽ dễ dàng hoạt động với Danh mục tài sản XML (xcAssets). Bạn có thể thêm những bộ hình ảnh này vào bất kỳ Danh mục tài sản Xcode nào bằng cách kéo chúng vào Xcode vào danh mục tài sản hoặc bằng cách sao chép thư mục đó vào thư mục xcasset.

Bộ hình ảnh iOS

Bộ hình ảnh chứa hình ảnh có mật độ đơn, kép và ba (1x, 2x, 3x) để chúng hoạt động trên tất cả các mật độ màn hình iOS đã biết. Cả hai biểu tượng màu đen và trắng đều được cung cấp, nhưng bạn nên sử dụng imageWithRenderingMode của UIImage với UIImageRenderingModeAlwaysTemplate. Tính năng này cho phép hình ảnh được dùng làm mặt nạ alpha và có thể được phủ màu bằng bất kỳ màu nào có thể.

Ví dụ về Objective-C:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Ví dụ về Swift:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

Biểu tượng trong RTL

Những ngôn ngữ như tiếng Ả Rập và tiếng Do Thái được đọc từ phải sang trái (RTL). Đối với các ngôn ngữ RTL, giao diện người dùng phải được phản chiếu để hiển thị hầu hết các thành phần theo RTL. Khi giao diện người dùng được phản chiếu cho RTL, một số biểu tượng cũng nên được phản chiếu. Khi văn bản, bố cục và biểu tượng được phản chiếu để hỗ trợ giao diện người dùng từ phải sang trái, mọi thứ liên quan đến thời gian đều phải được mô tả là di chuyển từ phải sang trái. Ví dụ: tiến trỏ sang bên trái và ngược trỏ sang bên phải. Tuy nhiên, hãy lưu ý rằng bối cảnh đặt biểu tượng cũng ảnh hưởng đến việc biểu tượng có được phản chiếu hay không.

Các biểu tượng chỉ được phản chiếu nếu hướng của các biểu tượng đó khớp với các thành phần khác trên giao diện người dùng ở chế độ RTL. Khi một biểu tượng đại diện cho các đặc điểm hình ảnh của trang web nhưng khác với RTL thì biểu tượng đó cũng phải được phản chiếu trong RTL. Ví dụ: nếu các số trong danh sách được đánh số ở bên phải trong ngôn ngữ RTL, thì các số phải ở bên phải của biểu tượng được phản chiếu.

Biểu tượng RTL trên Android

Bài viết này dành cho nhà phát triển Android mô tả chi tiết cách triển khai giao diện người dùng RTL. Theo mặc định trên Android, các biểu tượng không được phản chiếu khi hướng bố cục được phản chiếu. Bạn cần phản chiếu cụ thể các biểu tượng thích hợp khi cần, bằng cách cung cấp thành phần chuyên biệt cho ngôn ngữ RTL hoặc sử dụng chức năng khung để phản chiếu thành phần.

Để cung cấp thành phần chuyên biệt cho các ngôn ngữ RTL, bạn có thể sử dụng bộ hạn định ldrtl trên các thư mục tài nguyên, chẳng hạn như res/drawable-ldrtl/. Tài nguyên bên trong những thư mục như vậy sẽ chỉ được sử dụng cho các ngôn ngữ RTL. Đối với các thiết bị chạy API Android 19 trở lên, khung này cũng cung cấp thuộc tính autoMirrored cho các đối tượng có thể vẽ. Khi bạn đặt thuộc tính này thành true (đúng), đối tượng có thể vẽ sẽ tự động được phản chiếu trên các ngôn ngữ RTL.

Sử dụng chế độ Tự động phản chiếu:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

Nếu không thể sử dụng tính năng autoMirrored hoặc cung cấp tài nguyên có thể vẽ thay thế, bạn cũng có thể sử dụng thuộc tính ImageView scaleX để phản chiếu các đối tượng có thể vẽ (ví dụ: bằng cách cung cấp bố cục dành riêng cho RTL trong thư mục res/layout-ldrtl).

Phản chiếu trong tệp bố cục:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

Cuối cùng, đối tượng có thể vẽ có thể được phản chiếu theo phương thức lập trình.

Kiểm tra hướng bố cục theo cách thủ công bằng getLayoutDirection:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

Phản chiếu nội dung trên ImageView theo phương thức lập trình:

imageView.setScaleX(-1);

Biểu tượng RTL trên iOS

iOS có khái niệm về UISemanticContentAttribute được đính kèm vào mỗi khung hiển thị. Đó có thể là unspecified, forceLeftToRight, forceRightToLeft, playback hoặc spatial. iOS sử dụng giá trị này và chế độ cài đặt (từ trái sang phải (LTR)/RTL của thiết bị hiển thị giao diện để xác định hướng effectLayoutDirection của khung hiển thị). ModifierLayoutDirection xác định xem có phản chiếu hình ảnh khi hình ảnh hiển thị hay không.

Theo mặc định, nội dung ngữ nghĩa của hình ảnh được đặt thành unspecified. Điều này khiến chúng được phản chiếu ở chế độ RTL. Nếu không muốn một biểu tượng được phản chiếu, bạn cần đặt biểu tượng đó một cách rõ ràng là forceLeftToRight. Apple nêu ra một số trường hợp ngoại lệ không nên được phản chiếu, chẳng hạn như phát nội dung đa phương tiện (Tua đi, tua lại, v.v.), nốt nhạc, hình ảnh cho biết thời gian đang trôi qua, v.v.

Ví dụ về Objective-C:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Ví dụ về Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

Để xem tài liệu chuyên sâu hơn về cách triển khai RTL trên iOS và macOS, vui lòng xem tài liệu về RTL của Apple.

Nội dung ngữ nghĩa đã được thêm vào iOS 9. Nếu bạn đang hỗ trợ các phiên bản iOS cũ hơn, khung quốc tế hoá Material sẽ điều chỉnh một số chức năng cho iOS 8.

Biểu tượng RTL trên web

Bạn nên xem bài viết sau để làm hướng dẫn cơ bản về RTL trên web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

Theo mặc định trên web, các biểu tượng không được phản chiếu khi hướng bố cục được phản chiếu. Bạn cần phản chiếu cụ thể các biểu tượng thích hợp khi cần.

Ví dụ bên dưới cho thấy cách triển khai một quy tắc RTL CSS đơn giản. Bạn cũng có thể xem trên codepen.

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

Tạo biểu tượng RTL của riêng bạn bằng ImageMagick

Nếu không thể phản chiếu biểu tượng trong mã, bạn có thể sử dụng ImageMagick để phản chiếu hình ảnh theo chiều ngang.

convert -flop my_icon.png my_icon_rtl.png

Biểu tượng nào cần được phản chiếu cho RTL?

Dưới đây là danh sách biểu tượng có thể được phản chiếu theo phương thức lập trình sang RTL:


Mũi tên quay lại	Mũi tên quay lại trên iOS	Mũi tên tiến về phía trước
Mũi tên tiến lên trên iOS	Mũi tên bên trái	Mũi tên bên phải
Bài tập	Trả bài tập	phím backspace
Mức pin không xác định	Đã thực hiện cuộc gọi	Hợp nhất cuộc gọi
cuộc gọi bị nhỡ	Có cuộc gọi, cuộc gọi đi bị nhỡ	Đã nhận cuộc gọi
cuộc gọi đã tách	mũi tên bên trái	hình chữ V bên phải
chế độ đọc trên Chrome	thiết bị không xác định	DVR
ghi chú về sự kiện	Danh sách phát nổi bật của	Video nổi bật của
trang đầu	hạ cánh	Chuyến bay cất cánh
Giảm thụt lề định dạng	Tăng thụt lề định dạng	Đã đánh dấu đầu dòng danh sách định dạng
tiến	Hàm	Giá trị nhập của
thẻ trên bàn phím	nhãn	nhãn quan trọng
Đường viền nhãn	trang cuối	ra mắt
Danh sách	Trợ giúp trực tiếp về	Chia sẻ màn hình thiết bị di động
Biểu đồ nhiều đường của	di chuyển trước	chuyển đến trang tiếp theo
tuần tới	ghi chú	mở trong cửa sổ mới
Thêm danh sách phát	bản nhạc trong danh sách chờ	làm lại
câu trả lời	trả lời tất cả	lượt chia sẻ màn hình
Gửi	văn bản ngắn	hiển thị biểu đồ
sắp xếp	sao 1/2	chủ đề
đang có xu hướng đứng yên	mục tiêu	đang có xu hướng giảm
đang có xu hướng tăng	Huỷ	Danh sách xem
Chăn chần có khung nhìn	xuống dòng tự động