Control

Giao diện FUI được xây dựng bằng HTML và Vuetify 2 Component dưới dạng cấu trúc JSON

Cấu trúc control

Dưới đây là ví dụ để tạo một giao diện nút bấm (Button):

Với giao diện nút bấm như trên trong FUI được thể hiện dưới dạng cấu trúc như sau:

{
   "el": "v-btn",
   "col": {},
   "attr": {
      "class": "rounded-xl",
      "color": "primary",
      "depressed": "",
      "v-on:click": "() => alert('abc')"
   },
   "innerHTML": "<v-icon left>mdi-account</v-icon> Click Me"
   "w": 6
}

Còn đây là cách thể hiện ở HTML

<v-flex class="px-2" xs12 md6>
    <v-btn class="rounded-xl" color="primary" depressed @click="() => alert('abc')">
        <v-icon left>mdi-account</v-icon> Click Me
    </v-btn>
</v-flex>

Cấu trúc của một control gồm:

• el: Tên của một "html tag" hay component của Vuetify (v-text-field, v-btn,...) hoặc đối tượng Vue component được xây dựng thêm (f-table, f-button,...).

• col: Thuộc tính của v-flex, vì các control được bao trong một v-flex. Tìm hiểu thuộc tính v-flex và Flex Layout

• attr: Các thuộc tính props (bao gồm cả sự kiện event) của một component Vuetify hoặc của hệ thống. Ví dụ v-btn trên có những thuộc tính sau:

• {
      "class": "rounded-xl",
      "color": "primary",
      "depressed": "",
      "v-on:click": "() => alert('abc')"
  }

• innerHTML: Bao gồm chuỗi HTML hoặc mảng các cấu trúc control bên trong của control hiện tại.

• w: Độ rộng của một control được xác định bởi số cột mà control sẽ chiếm bên trong hệ thống lưới và như chúng ta đã biết một hệ thống lưới được quy ước là 12 cột. Tìm hiểu rõ hơn tại đây Vuetify Grid System và Flex Layout