钉钉宜搭

阿里云官方出品

「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。

1

回答

2

回答

khvdpar6l2mxi 2022-10-21 2148浏览量 回答数 2

如果是想要导航的话,可以直接多页面的模式就能有导航,导航的 icon 可更改。

image.png

如果自定义页面的组件,不够用,可以用 Fusion.design 下的部分组件。

需要实现的效果如下: image.png

实现步骤:

在自定义页面中使用 JSX 组件 image.png

代码如下:

function render() {
  const { Tab } = window.Next || {};
  
  function CustomTabItem({ title, desc, img }) {
    return (
      <div className="custom-tab-item">
        <div className="tab-title">
          <img className="tab-img" src={img} />
          {title}
        </div>
        <div className="tab-desc">{desc}</div>
      </div>
    );
  }

  const panes = [
    {
      key: "e-checking",
      title: "Alipay",
      desc: "The fee to be paid is $15",
      img:
        "https://img.alicdn.com/imgextra/i4/O1CN01WZitW51tO7ueHnfEt_!!6000000005891-2-tps-200-200.png"
    },
    {
      key: "brand-card",
      title: "Bank Card",
      desc: "The fee to be paid is $17",
      img:
        "https://img.alicdn.com/imgextra/i2/O1CN01NRazFH1nqATF6ywsJ_!!6000000005140-2-tps-200-200.png"
    }
  ];

  return (<Tab
    shape="wrapped"
    tabRender={(key, props) => <CustomTabItem key={key} {...props} />}
  >
    {panes.map(pane => (
      <Tab.Item key={pane.key} {...pane} tabStyle={
    { height: "60px" }}>
        {pane.desc}
      </Tab.Item>
    ))}
  </Tab>)
}
FullHouse 评论 0

2

回答

3

回答

3

回答

2

回答

2

回答

1

回答

1

回答

1

回答

游客jtva7he4c53t6 2021-12-27 3293浏览量 回答数 1

1

回答

游客jtva7he4c53t6 2021-12-23 3231浏览量 回答数 1

2

回答

游客6e2tuxi555pss 2021-12-23 2760浏览量 回答数 2

1

回答

1

回答

学会 这篇教程 基本就有答案了。

另外还可以看看 如何将宜搭数据和三方系统数据打通?

FullHouse 评论 0

1

回答

1

回答

游客myeikfhh5b3n2 2021-09-27 1920浏览量 回答数 1

1

回答

公告

帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。

展开

宜搭公众号

相关产品