@lx-react-materiel/components

usage

1. 安装组件 pnpm add @lx-react-materiel/components

2. 利用项目编译组件

   仓库发布的npm包都是源文件，需要依赖于使用项目进行编译构建，Taro 默认不编译 node_modules 中的文件，所以使用物料仓库中组件需设置项目中的 Taro 编译配置

   {
     mini: {
       compile: {
         include: [
           path.resolve(__dirname, '..', 'node_modules/@lx-react-materiel/')
         ],
       },
     }
   }
   

3. 在页面使用

   import React from 'react'
   
   import { LxBox, LxText, LxItem, LxItemGroup, LxImage, LxButton, LxFooter, LxCard, LxPrice, LxSemiCircle } from '@lx-react-materiel/components'
   
   export function ComponentDemo () {
     return (
       <LxBox>
         {/* LxText 组件使用 */}
         <LxBox marginTop={20}>
           <LxText fontSize={40} fontWeight='bold'>大标题</LxText>
           <LxPrice price={12345} />
         </LxBox>
   
         {/* card组件使用 */}
         <LxCard
           marginTop={20}
           slotHeader={<LxBox>header</LxBox>}
           slotBodyLeft={<LxImage src='https://t.lxstatic.com/dos/ucma/2.9.7/subscribe.png' />}
           slotBodyRight={<LxBox>right</LxBox>}
         >
           <LxButton fontSize={30}>按钮1</LxButton>
           <LxButton fontSize={30}>按钮2</LxButton>
           <LxButton fontSize={30}>按钮3</LxButton>
         </LxCard>
   
         <LxSemiCircle size={30} type='right' background='orange'></LxSemiCircle>
   
         <LxItemGroup
           borderRadius={16}
           className="order-item-group"
           items={[
             {
               label: '订单编号',
               value: '123123'
             },
             {
               label: '创建时间',
               value: '2023-05-10 12:52:32'
             },
             {
               label: '支付方式',
               value: '微信支付'
             }
           ]}
         />
   
         <LxBox marginTop={20}>
           <LxItem
             background="orange"
             label="左边"
             paddingLeft={55}
             value="右边"
           />
         </LxBox>
   
         <LxFooter>
           <LxButton color='#000' fontSize={30}>底部按钮</LxButton>
         </LxFooter>
       </LxBox>
     )
   }