@antmjs/vantui/es/config-provider/demo/demo1.js

一套适用于Taro3及React的vantui组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react from 'react';
import { View } from '@tarojs/components';
import { ConfigProvider, CellGroup, Field, Rate, Slider, Button } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var themeVars = {
  primaryColor: '#e19a9a',
  rateIconFullColor: '#e19a9a',
  sliderBarHeight: '4px',
  sliderButtonWidth: '20px',
  sliderButtonHeight: '20px'
};
export default function Demo() {
  var _react$useState = react.useState(4),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    rate = _react$useState2[0],
    setRate = _react$useState2[1];
  var _react$useState3 = react.useState(50),
    _react$useState4 = _slicedToArray(_react$useState3, 2),
    slider = _react$useState4[0],
    setSlider = _react$useState4[1];
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(ConfigProvider, {
      themeVars: themeVars,
      children: [/*#__PURE__*/_jsxs(CellGroup, {
        children: [/*#__PURE__*/_jsx(Field, {
          label: "\u8BC4\u5206",
          renderInput: /*#__PURE__*/_jsx(Rate, {
            value: rate,
            onChange: function onChange(e) {
              return setRate(e.detail);
            }
          })
        }), /*#__PURE__*/_jsx(Field, {
          label: "\u6ED1\u5757",
          border: false,
          renderInput: /*#__PURE__*/_jsx(View, {
            style: "width: 100%",
            children: /*#__PURE__*/_jsx(Slider, {
              value: slider,
              onChange: function onChange(e) {
                return setSlider(e.detail);
              }
            })
          })
        })]
      }), /*#__PURE__*/_jsx(View, {
        style: "margin: 16px",
        children: /*#__PURE__*/_jsx(Button, {
          round: true,
          block: true,
          type: "primary",
          children: "\u63D0\u4EA4"
        })
      })]
    }), /*#__PURE__*/_jsxs(ConfigProvider, {
      children: [/*#__PURE__*/_jsxs(CellGroup, {
        children: [/*#__PURE__*/_jsx(Field, {
          label: "\u8BC4\u5206",
          renderInput: /*#__PURE__*/_jsx(Rate, {
            value: rate,
            onChange: function onChange(e) {
              return setRate(e.detail);
            }
          })
        }), /*#__PURE__*/_jsx(Field, {
          label: "\u6ED1\u5757",
          border: false,
          renderInput: /*#__PURE__*/_jsx(View, {
            style: "width: 100%",
            children: /*#__PURE__*/_jsx(Slider, {
              value: slider,
              onChange: function onChange(e) {
                return setSlider(e.detail);
              }
            })
          })
        })]
      }), /*#__PURE__*/_jsx(View, {
        style: "margin: 16px",
        children: /*#__PURE__*/_jsx(Button, {
          round: true,
          block: true,
          type: "primary",
          children: "\u63D0\u4EA4"
        })
      })]
    })]
  });
}