Как правильно раскошелиться Ioni c Stencil Component - PullRequest
Новая
       20

Как правильно раскошелиться Ioni c Stencil Component

1 голос
/ 02 марта 2020

Я хотел бы раскошелиться на ion-datetime, чтобы настроить столбцы и положение на экране и использовать их в моем приложении ioni c.

Я понятия не имею, как это сделать, и общие решения кажутся быть уродливым копированием пасты.

Есть ли какое-то правильное решение там?

1 Ответ

1 голос
/ 02 марта 2020

Нет официального способа / API для разветвления одного компонента Ioni c. Однако все еще можно настроить их компоненты по своему вкусу. Вы можете использовать свойство pickerFormat для настройки столбцов. Если этого недостаточно для вас, вы можете создать свой собственный инструмент выбора даты и времени, используя компонент ion-picker (который дает вам больший контроль над отображением столбцов).

Когда дело доходит до стиля, это не так просто, потому что вы не можете использовать CSS для перезаписи любого из стилей внутренних компонентов. Из-за природы Shadow DOM только открытые CSS пользовательские свойства позволяют изменять внешний вид компонента (если элементы не живут в Light DOM).

Но это все еще возможно чтобы изменить стили, нужно просто через JavaScript. Вы можете создать свой собственный компонент-оболочку вокруг ion-datetime, взять ссылку на него и go прямо в его 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} />;
  }
}

Имейте в виду, что такого рода модификации могут прерваться, когда команда Ioni c обновит компонент и изменит некоторые детали внутренней реализации, на которые вы полагались.

...