Настройка материала-слайдера в AngularDart

Question

Я хочу настроить компонент <material-slider> в AngularDart.Я хочу добавить маркер к определенному значению, например, так:

------|----O-------

Здесь | - это маркер, который я хотел бы добавить, а O - этонормальная ручка слайдера.С маркером не будет никакого взаимодействия с пользователем, я просто установлю его из кода.

Какой лучший способ сделать это?Должен ли я добраться до его DOM и ввести что-то там?Могу ли я расширить класс MaterialSlider?Есть ли примеры, которые могут быть полезны?

Answer 1

Я закончил отображать маркер за material-slider.Таким образом, мне не нужно было изменять material-slider.

Я создал родителя div с position: relative, который имеет material-slider и маркер div как дочерние.Маркер div имеет position: absolute и left: 50%, чтобы поместить его прямо в середину ползунка.

Другие вещи, которые я исследовал, были:

• Да, кажется, вы можете расширять компоненты, нет, это не весело.
• Вы можете получить dart:html Elementвашего собственного компонента, который имеет material-slider и добавить материал в него.Для этого вы вводите Element в свой конструктор.Однако вы должны использовать его в AfterViewInit, чтобы создать material-slider как ребенка.querySelector() помогает вам получить Element из material-slider, после чего вы можете делать такие вещи, как slider.children.add()