Vaadin 14 纸张 slider 销属性

Question

我还是 Vaadin 的新手，我正在尝试使用 Vaadin 14 实现 @polymenr/paper-slider 组件。

我已经下载了项目https://github.com/berndhopp/vaadin-paper-sliders来自 Github，我正在尝试设置“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);
    }
}

我可以看到纸张 slider ，但按下 slider 拇指时看不到数值标签。

谁能帮忙解决这个问题吗

谢谢 亚历克斯

Answer 1

似乎数字值在布局中丢失了。您可以尝试向布局添加高度，例如 sliderLine.setHeight("100px") 或向组件添加一些填充 paperSlider.getElement().getStyle().set("padding -顶部”，“30px”)。