Directory

← Back

Sticky Notes for Vaadin Flow 14.+

Sticky note button to pin remainders

Author

Contributors

Rating

StickyNotes

StikyNotes buttons open a stickynote board where you can pin notes as a remainders.

It is attached over any control an can be overlapped.

TODO:

  • align to every side.
  • resizeable borders?

Sample code

StickyBoard sb;
public void testStickyNotes() {

        Button button = new Button("Click me", event -> {
            hello.setText("Clicked!");
            hello.setClassName("clicked");
            sb.requestToSave();
        });
        button.setThemeName("primary");
        button.setId("buttonID");
        add(button);

        Button btnLoad = new Button("load", event -> {
            sb.load("[{\"title\":\"note 1\",\"noteText\":\"11111\"},{\"title\":\"note 2\",\"noteText\":\"2222\\n2222\\n\\n\\n2222\\n\"}]");
        });
        btnLoad.setThemeName("secondary");
        add(btnLoad);

        
        TextField subtext = new TextField("subtext");
        Button subtn = new Button("subbutton");
        VerticalLayout vlPop = new VerticalLayout();
        vlPop.add(subtext);
        vlPop.add(subtn);

        sb = new StickyBoard(button.getElement())
                    .setXOffset(-10)
                    .setYOffset(-10);
        sb.setSaveCallback(new ISaveNotes() {
            @Override
            public void onDataUpdated() {
                add(new Label("saved data: "+sb.getNotesData().toJson()));
            }
        });
        UI.getCurrent().add(sb);
}

Links

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

fix color issue. Now save the color of each note. fix focus rotation.

Released
2020-10-17
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Polymer 3.0+
Browser
Firefox
Google Chrome
Online