vaadin - Vaadin 14 纸滑针属性
问题描述
我还是 Vaadin 的新手,我正在尝试使用 Vaadin 14 实现 @polymenr/paper-slider 组件。
我已经从 Github 下载了项目https://github.com/berndhopp/vaadin-paper-sliders,我正在尝试按照此处的说明设置“pin”属性
https://vaadin.com/forum/thread/18215247/vaadin-14-slider
在 PaperSlider.java 中
...
public void setPin(boolean pin) {
this.getElement().setProperty("pin", pin);
}
...
在 DemoView.java
package org.vaadin.addon.sliders.ui;
//import org.vaadin.addon.sliders.PaperSlider;
import org.vaadin.addon.sliders.PaperSlider;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
@Route("")
public class DemoView extends VerticalLayout
{
private PaperSlider slider = null;
private Label sliderValue = null;
public DemoView()
{
Anchor sourceLink = new Anchor("https://github.com/markhm/vaadin-paper-sliders", " (source code on GitHub)");
sourceLink.setTarget("_blank");
HorizontalLayout titleBox = new HorizontalLayout();
titleBox.setAlignItems(Alignment.BASELINE);
H3 title = new H3("Vaadin paper-slider, ported to Vaadin v14");
titleBox.add(title, sourceLink);
add(titleBox);
//
// https://stackoverflow.com/questions/68531460/vaadin-14-paper-slider-pin-property
//
HorizontalLayout sliderLine = new HorizontalLayout();
sliderLine.setHeight("100px");
Label sliderValue = new Label();
PaperSlider paperSlider = new PaperSlider(0,100,20);
paperSlider.addValueChangeListener(e -> sliderValue.setText("New Slider value: " + e.getValue()));
paperSlider.setPin(true);
sliderLine.add(paperSlider, sliderValue);
add(sliderLine);
// slider.getElement().getStyle().set("padding-top", "30px") ;
//Label whiteline = new Label("");
//whiteline.setHeight("50px");
//add(whiteline);
// Testing pin property
// HorizontalLayout mySliderLine = new HorizontalLayout();
//sliderValue = new Label("mySlider value");
//PaperSlider paperSlider = new PaperSlider(0,100,20);
//paperSlider.getElement().getStyle().set("padding-top", "30px");
//mySliderLine.setHeight("100px");
//paperSlider.setPin(true);
//mySliderLine.add(paperSlider);
// slider.setPin(true) ;
// add(slider) ;
// NB: The PaperRangeSlider does not support Polymer 3.
// HorizontalLayout rangeSliderLine = new HorizontalLayout();
//
// Label rangeValues = new Label("Range values");
// rangeSlider = new PaperRangeSlider(0, 100, 40, 60);
// rangeSlider.addValueChangeListener(e -> rangeValues.setText("Range values: " + e.getValue()));
// rangeSliderLine.add(rangeSlider, rangeValues);
// add(rangeSliderLine);
}
}
我可以看到纸张滑块,但在按下滑块拇指时看不到数值标签。
任何人都可以帮忙吗?
谢谢亚历克斯
解决方案
似乎数值在布局中丢失了。您可以尝试向布局添加高度,例如sliderLine.setHeight("100px")
向组件添加一些填充paperSlider.getElement().getStyle().set("padding-top", "30px")
。
推荐阅读
- javascript - Puppeteer - 按类名计算元素
- reactjs - 如何通过 Webpack 的外部使用 CDN 导入 ReactJS Material UI?
- sql - 使用 UTF-8 SQL Server 整理 SQL_Latin1_General_CP850_BIN2 时出错
- c# - 使用 .net 核心 Web API 中的 ApplicationBuilder Map 注入自定义中间件时,不会调用默认控制器
- c# - 如何在被测试的同一个类中模拟一个方法?
- python - matplotlib 连接散点图中的点
- javascript - 如何使用(async+forloop+timeInterval)编写一个nodeJs函数通过superagent发出请求
- r - R工作室停止脚本
- ruby - 来自 ActionView::Template::Error 内部的错误 - 不能将字符串强制转换为整数
- php - 使用 Ajax 输入在 Laravel 中创建时存储数据透视表值