Ray中怎么使用tabs组件？

[Loolluke0617]

miniapp-components-plus，的tabs使用方法。
请问在ray中，tabs内容插槽部分怎么写？

TYML文档：
<mptabs
tabs="{{tabs}}"
activeTab="{{activeTab}}"
swiperClass="tyui-tabs-swiper"
bind:tabclick="onTabCLick"
bind:change="onChange"title" slot="tab-content-{{index}}">
<tyList></tyList>
</view>
</mptabs>

[智能小程序开发者]

• 你可以在 Ray 组件中直接使用小程序的自定义组件。包括支持原生 UI 组件库，如：miniapp-components-plus, weui等等。

示例代码

• 以智能小程序的扩展组件库 miniapp-components-plus 为例:

Code: Select all

import * as React from 'react'
import { View } from '@ray-js/components'
import Cells from '@tuya-miniapp/miniapp-components-plus/cells'
import Cell from '@tuya-miniapp/miniapp-components-plus/cell'

export default () => (
  <View>
    <Cells title='带说明的列表项'>
      <Cell value='标题文字' footer='说明文字'></Cell>
      <Cell>
        <View>标题文字（使用slot）</View>
        <View slot='footer'>说明文字</View>
      </Cell>
    </Cells>
  </View>
)

注意事项：

• 对于小程序自定义组件的事件，请使用bind开头的事件。

Code: Select all

import React from 'react'
import { View } from '@ray-js/components'
import ActionSheet from '@tuya-miniapp/miniapp-components-plus/actionSheet'
export default function Demo() {
  const [isShowAtionSheet, setIsShowAtionSheet] = React.useState(false)
  const groups = [
    { text: '示例菜单', value: 1 },
    { text: '示例菜单', value: 2 },
    { text: '负向菜单', type: 'warn', value: 3 },
  ]
  return (
    <View>
      <Button
        onClick={() => {
          setIsShowAtionSheet(true)
        }}
      >
        点击弹出actionsheet
      </Button>
      <ActionSheet
        bindactiontap={(e) => {
          console.log('点击 ActionSheet 的按钮项', e)
        }}
        bindclose={(e) => {
          console.log('点击关闭')
          setIsShowAtionSheet(false)
        }}
        show={isShowAtionSheet}
        actions={groups}
        title='这是一个标题，可以为一行或者两行。'
      ></ActionSheet>
    </View>
  )
}

• 对于带有具名 slot 的组件，具名 slot 部分的最外层只能用 View 组件。

错误

Code: Select all

import React from 'react'
import { View } from '@ray-js/components'
import Badge from '@tuya-miniapp/miniapp-components-plus/badge'
export default () => (
  <View>
    <Badge>
      <Text slot='inner'>Ray</Text>
    </Badge>
  </View>
)

正确

Code: Select all

import React from 'react'
import { View } from '@ray-js/components'
import Badge from '@tuya-miniapp/miniapp-components-plus/badge'
export default () => (
  <View>
    <Badge>
      <View slot='inner'>Ray</View>
    </Badge>
  </View>
)

[智能小程序开发者]

看一下上面的示例代码，看看能否解决你的问题？

[Loolluke0617]

看一下上面的示例代码，看看能否解决你的问题？

weui的引入方式一样吗？

[智能小程序开发者]

你如果要将ray运行在微信端使用weui组件，如果运行在智能小程序端，使用@tuya-miniapp/miniapp-components-plus。 具体使用哪个组件取决于你要运行在哪个环境

[智能小程序开发者]

使用weui还是@tuya-miniapp/miniapp-components-plus ，在组件调用方面是没有区别的