examples/mini-program-example/src/pages/component/button/button.js - main - githubmirror/taro

examples/mini-program-example/src/pages/component/button/button.js
102 строки3 KB
刘阳
同步harmony最新开发分支的代码：例子程序
02 апр 2024, 09:33
02 апр 2024, 09:33d958330
import './button.scss'
import React from 'react'
import { View, Button } from '@tarojs/components'

import Header from '../../../components/head/head'
import ComponentState from '../../../components/component_state/component_state'

export default class PageButton extends React.Component {
  state = {
    btn: [
      {
        text: '页面主操作 Normal',
        size: 'default',
        type: 'primary',
      },
      {
        text: '页面主操作 Loading',
        size: 'default',
        type: 'primary',
        loading: true,
      },
      {
        text: '页面主操作 Disabled',
        size: 'default',
        type: 'primary',
        disabled: true,
      },
      {
        text: '页面次要操作 Normal',
        size: 'default',
        type: 'default',
      },
      {
        text: '页面次要操作 Disabled',
        size: 'default',
        type: 'default',
        disabled: true,
      },
      {
        text: '警告类操作 Normal',
        size: 'default',
        type: 'warn',
      },
      {
        text: '警告类操作 Disabled',
        size: 'default',
        type: 'warn',
        disabled: true,
      },
    ],
  }
  render() {
    return (
      <View className='components-page'>
        <View className='components-page__header'>
          <Header title='Button'></Header>
          <ComponentState platform='H5' rate='100'>
            {' '}
          </ComponentState>
        </View>
        <View className='components-page__body'>
          <View className='components-page__body-example example'>
            <View className='example-body'>
              {this.state.btn.map((item, index) => {
                return (
                  <Button
                    key={`btn-${index}`}
                    size={item.size ? item.size : ''}
                    type={item.type ? item.type : ''}
                    loading={item.loading ? item.loading : false}
                    disabled={item.disabled ? item.disabled : false}
                  >
                    {item.text}
                  </Button>
                )
              })}
              <Button plain type='primary'>
                按钮
              </Button>
              <Button plain type='primary' disabled>
                不可点击的按钮
              </Button>
              <Button plain>镂空按钮</Button>
              <Button plain disabled>
                镂空按钮 Disabled
              </Button>
              <View className='btn-center'>
                <Button size='mini' type='primary'>
                  小号按钮
                </Button>
                <Button size='mini'>小号按钮</Button>
                <Button size='mini' type='warn'>
                  小号按钮
                </Button>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}