Nice Package, Mate

    rax-view
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    rax-view

    npm

    支持

    Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

    描述

    View 是最基础的组件,它支持 Flexbox、touch handling 等功能,并且可以任意嵌套。 不论在什么容器中,View 都直接对应一个容器的原生视图,就像 web 中的 div 一样。 支持任意自定义属性的透传。

    安装

    $ npm install rax-view --save

    属性

    属性 类型 默认值 必填 描述 支持
    className string - false 自定义样式名 browser weex miniApp wechatMiniprogram
    style CSSProperties - false 自定义样式 browser weex miniApp wechatMiniprogram
    onClick function - false 点击 browser weex miniApp wechatMiniprogram
    onLongpress function - false 长按 weex miniApp wechatMiniprogram
    onAppear function - false 当前元素可见时触发 browser weex miniApp wechatMiniprogram
    onDisappear function - false 当前元素从可见变为不可见时触发 browser weexminiApp wechatMiniprogram
    onFirstAppear function - false 当前元素首次可见时触发 browser weexminiApp wechatMiniprogram
    onTouchStart function - false 触摸动作开始 browser weexminiApp wechatMiniprogram
    onTouchMove function - false 触摸后移动 browser weexminiApp wechatMiniprogram
    onTouchEnd function - false 触摸动作结束 browser weexminiApp wechatMiniprogram
    onTouchCancel function - false 触摸动作被打断,如来电提醒,弹窗 browser weexminiApp wechatMiniprogram

    注意

    • appear 相关事件在 Web 中需要引入并使用 appear-polyfill
    • onAppear/onDisappear/onFirstAppear 在微信小程序端仅支持运行时方案

    示例

    import { createElement, useRef, useEffect, render } from "rax";
    import DU from "driver-universal";
    import View from "rax-view";
    
    const App = () => {
      const viewRef = useRef(null);
      useEffect(() => {});
      return (
        <View
          ref={viewRef}
          style={{
            padding: '30rpx'
          }}
          onClick={() => {
            alert("container was clicked!");
          }}
        >
          <View
            style={{
              width: '300rpx',
              height: '300rpx',
              backgroundColor: "red"
            }}
            onClick={e => {
              e.stopPropagation();
              alert("red was clicked");
            }}
          />
          <View
            style={{
              width: '300rpx',
              height: '300rpx',
              backgroundColor: "green",
              position: "absolute",
              top: '20rpx',
              left: '20rpx'
            }}
            onClick={() => {
              alert("green was clicked");
            }}
          />
          <View
            style={{
              width: '300rpx',
              height: '300rpx',
              backgroundColor: "yellow",
              position: "absolute",
              top: '80rpx',
              left: '210rpx'
            }}
            onClick={e => {}}
          />
        </View>
      );
    };
    
    render(<App />, document.body, { driver: DU });

    默认样式

    rax-view 默认样式如下:

    .rax-view-v2 {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
       align-content: flex-start;
       border: 0 solid black;
       margin: 0;
       padding: 0;
       min-width: 0;
    }

    Install

    npm i rax-view

    DownloadsWeekly Downloads

    921

    Version

    2.3.0

    License

    BSD-3-Clause

    Unpacked Size

    145 kB

    Total Files

    38

    Last publish

    Collaborators

    • rax-publisher