Tantalum UI

Result 结果 

import { TaResult, TaGroup, showToast } from '@/index'

export default function ExpResult() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaResult
          type="info"
          title="标题"
          description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
        />
      </TaGroup>
      <TaGroup title="type=success & showBack=false">
        <TaResult
          type="success"
          title="支付成功"
          description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
          showBack
        />
      </TaGroup>
      <TaGroup title="type=warning & 自定义按钮文案">
        <TaResult
          type="warning"
          title="遇到问题"
          description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
          confirmText="自定义确定"
          backText="自定义返回"
          onConfirm={() => showToast('点击了确定')}
          onBack={() => showToast('点击了返回')}
        />
      </TaGroup>
      <TaGroup title="type=fail & 自定义内容">
        <TaResult
          type="fail"
          title="支付失败"
          description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
        >
          <div className="exp-result-extra">
            在这里可以附加组件元素或者相应的提示文案，样式自定。
          </div>
        </TaResult>
      </TaGroup>
    </>
  )
}

Import 

import { TaResult } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type { ResultType } from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
typeResultType'info'否类型，对应不同的提示图标，可选 'info', 'warning', 'success', 'fail'
titlestring''否标题
descriptionstring''否小标题，副标题，描述
showBackbooleantrue否是否显示返回按钮
confirmTextstring'确定'否确认按钮的文字
backTextstring'返回'否返回按钮的文字

Events

事件描述回调函数参数
onConfirm确认按钮点击e: Event
onBack返回按钮点击e: Event

Slots

附加内容（children） 

<TaResult
  type="fail"
  title="支付失败"
  description="内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现。"
>
  <div className="exp-result-extra">
    在这里可以附加组件元素或者相应的提示文案，样式自定。
  </div>
</TaResult>