Floating Panel

Can serve as a container for notes, alert, etc.

Sample implementation

Enter custom values to be displayed inside the panel.

Select panel theme:

Copied successfully!


                            <div class="pcui">
                            <pcui_floating_panel ref="floating-panel-one"
                            			v-bind:panel-theme="{{panelTheme}}"
                            			v-bind:header-text="{{headerText}}"
                            			v-bind:body-content="{{bodyContent}}"
                            			v-bind:btn-one-text="{{buttonOneText}}"
                            			v-bind:btn-two-text="{{buttonTwoText}}">
                            <div slot="additionalHTML">
                            <pcui_text_field v-model="{{textAreaContent}}"
                            			layout="No-label"
                            			type="multiline"
                            			placeholder="">
                            		/pcui_text_field>
                            </div>
                            	</pcui_floating_panel>
                            </div>

Note: This demo HTML uses the floating panel as a "sticky notes" alike which has a textarea.

Copied successfully!


                            var floatingPanelDemo = new Vue({
                            	el: '#floating-panel-demo',
                            	name: 'Floating Panel Demo',
                            	data: {
                            		panelTheme: 'floating-panel-info',
                            		headerText: 'Click & hold here to drag',
                            		bodyContent: 'BODY CONTENT',
                            		textAreaContent: 'TEXT AREA CONTENT',
                            		buttonOneText: 'Copy',
                            		buttonOneFunction: function () {},
                            		buttonTwoText: 'Clear',
                            		buttonTwoFunction: function () { }
                            	},
                            	components: {
                            		pcui_text_field: PCUIFixedLabelTextFieldComponent,
                            		pcui_floating_panel: PCUIFloatingPanelComponent
                            	},
                            	methods: {
                            		showPanel: function () {
                            		var self = this;
                            		self.$refs["floating-panel-one"].showPanel();
                            		}
                            	}
                            });