FunctionButton

Cập nhật lần cuối: 27/05/2022

Component cho phép bạn thực hiện một số chức năng được quy định sẵn. Khi người dùng nhấn vào nút này sẽ được tính là tương tác với Mini App và được cung cấp các thông tin cần thiết hỗ trợ cho các chức năng khác.

Properties

Name	Type	Required	Description
functionType	string	true	Nhận các giá trị: ORDER
onDataReceived	function		Hàm sẽ được gọi khi người dùng tương tác. Dữ liệu trả về sẽ tùy thuộc vào 'functionType'. Xem callbackData để biết thêm chi tiết
variant	ButtonVariants	primary	Độ đậm của background color
loading	boolean		Hiển thị icon loading
disabled	boolean		Trạng thái disable
type	ButtonType	highlight	Loại button
htmlType	ButtonHTMLType	button	HTML button type
size	ButtonSize		Kích thước button
fullWidth	boolean		Đặt kích thước button full parent width
prefixIcon	React.ReactNode		Thêm prefix icon
suffixIcon	React.ReactNode		Thêm suffix icon
icon	React.ReactNode		Thêm icon cho button

Type

ButtonType

Name	Description
"highlight"	highlight
"danger"	danger
"neutral"	neutral

ButtonHTMLType

Name	Description
"submit"	submit
"button"	button
"reset"	reset

ButtonSize

Name	Description
"large"	large
"medium"	medium
"small"	small

ButtonVariants

Name	Description
"primary"	primary button
"secondary"	secondary button
"tertiary"	tertiary button

Object callbackData

Type order

Name	Type	Description
token	string	Token để gửi thông báo. Token này sẽ có thời gian hiệu lực là 7 ngày

Example

Open Sandbox

import React from "react";
import { Page, FunctionButton, Box, Text, Icon } from "zmp-ui";

export default function HomePage(props) {
  return (
    <>
      <div className='section-container'>
        <FunctionButton
          variant='primary'
          functionType='order'
          onDataReceived={(token) => {
            console.log(token);
          }}
        />
      </div>
    </>
  );
}