1

我想分叉 ion-datetime 以自定义屏幕上的列和位置并在我的 ionic 应用程序中使用它。

我不知道该怎么做，整体解决方案似乎是丑陋的复制粘贴。

有没有合适的解决方案？

4

1 回答 1

1

没有用于分叉 Ionic 单个组件的官方方式/API。但是，仍然可以根据自己的喜好调整它们的组件。您可以使用该pickerFormat属性来调整列。如果这对您来说还不够好，您也许可以使用该ion-picker组件构建自己的日期时间选择器（这使您可以更好地控制如何呈现列）。

在样式方面，它并不那么简单，因为您不能使用 CSS 覆盖任何内部组件样式。由于 Shadow DOM 的性质，只有公开的CSS 自定义属性允许您修改组件的外观（除非元素存在于 Light DOM 中）。

但是仍然可以修改样式，只需要通过 JavaScript。您可以在 周围创建自己的包装器组件ion-datetime，获取对它的引用并直接进入它shadowRoot以修改样式。

@Component({ tag: 'my-datetime' })
export class MyDatetime {
  setStyles = (el?: HTMLIonDatetimeElement) => {
    if (!el || !el.shadowRoot) {
      return;
    }

    el.shadowRoot.querySelector('.datetime-text').style.fontWeight = 600;
  }

  render() {
    return <ion-datetime ref={this.setStyles} />;
  }
}

请注意，当 Ionic 团队更新组件并更改您所依赖的一些内部实现细节时，这些修改可能会中断。

于 2020-03-02T12:17:26.667 回答