FUI Guide
  • Tổng quan
    • Tại sao dùng FUI ?
  • Bắt đầu
    • Tạo một trang giao diện
  • Giao diện người dùng
    • Control
    • Bố cục trang
  • Data và khối lệnh
    • Data
    • Khối lệnh
    • Watch
  • Dự án và module
    • Dự án
    • Module
    • Gửi, nhận dữ liệu
    • Menu
    • Thêm mã nguồn
  • Các control chức năng
    • Vuetify 2 Control
    • FUI Control
      • f-button
      • f-table
    • Icons
  • Các hàm chức năng
    • Mở một cửa sổ
    • Chuyển tiếp trang (redirect)
    • Copy văn bản
Powered by GitBook
On this page
  • 1. Hiển thị icon
  • 2. Các trường hợp thường sử dụng icon
  • Tạo một nút đăng nhập:
  • Thêm icon vào một text field:
  1. Các control chức năng

Icons

Previousf-tableNextMở một cửa sổ

Last updated 1 year ago

Icon của FUI sử dụng thư viện .

1. Hiển thị icon

{
    "el": "v-icon",
    "innerHTML": "mdi-account"
}

Icon được viết theo cấu trúc mdi-<tên icon>.

Ví dụ:

  • mdi-account là icon tài khoản.

  • mdi-magnify là icon kính lúp.

Tiền tố mdi là tên viết tắt của Material Design Icons.

Bạn có thể tìm kiếm icon tại . Hãy sử dụng các đầu mục bên trái của trang để lọc icon theo chủ đề để có kết quả tìm kiếm tốt nhất.

2. Các trường hợp thường sử dụng icon

Tạo một nút đăng nhập:

{
    "el": "v-btn",
    "attr": {
        "color": "primary",
        "dark": true
    },
    "innerHTML": [
        {
            "el": "v-icon",
            "attr": {
                "left": true
            },
            "innerHTML": "mdi-account"
        },
        {
            "el": "span",
            "innerHTML": "Đăng nhập"
        }
    ]
}

Thêm icon vào một text field:

{
    "el": "v-text-field",
    "attr": {
        "label": "Tìm kiếm",
        "append-icon": "mdi-magnify"
    }
}
Material Design Icons
đây