squirrel_logo
Sign up for free
squirrel_logo

Print Button

 

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

 

This article describes the print button component and its properties.

The print button allows the user to print the project by invoking the print dialog of the browser. Note that to get the best results you should select the “Background Graphics” option in the “more settings” section of the browser’s print dialog box.

Select Print Button from the controls category of the component library. Move the mouse over the canvas and click to add a print button to your project:

 

Print Button Properties

The print button properties consist of BUTTON STYLING, INTERACTIVITY and DYNAMIC VISIBILITY drawers. This guide will describe the data insertion, button styling and interactivity properties only; the dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found here.

 

BUTTON STYLING:

The appearance of the button can be altered to suit a theme or particular style by using the BUTTON STYLING properties:

DEFAULT TEXT

The DEFAULT TEXT property is checked by default. Uncheck the checkbox adjacent to the DEFAULT TEXT section title to hide the default button label.

  • Button Text – This property contains the text that will be shown in the button label.
  • Font – Choose a font style from the dropdown list.
  • Size – Change the font size of the button label.
  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled to on, the button is blue:

  • Default Text Color – The button label will be shown in the colour that matches the value entered in the property field.
  • Opacity – This determines the transparency of the button label.

 

FORMAT

These formatting properties apply to the default button label.

  • Text alignment – Choose to align the button label to the left, right, or centre. The current selection is indicated by the blue button:

  • Content alignment – Choose to vertically align the button label to the top, centre or bottom of the button component. The current selection is indicated by the blue button:

  • Padding – This property defines the space between the button label and the button border.
Note: Padding will be applied in accordance with the properties set for Text alignment and Content alignment e.g. if the label is left justified and aligned to the top, then the padding will be applied between the left and top borders of the button and its label.

 

DEFAULT STYLE

In this section you can set the colour, border and drop shadow properties of the button.

  • Fill – When checked, the background of the button will be filled with a colour that matches the value entered in the property field.
  • Opacity – This determines the transparency of the background of the text label. This is only available when the Fill checkbox is checked.
  • Border – This property is unchecked by default. Check to add a border to the button and set the border colour and opacity properties as desired.

  • Weight – This property determines the line thickness of the button border in pixels.

  • Line style – Select a border line style from the dropdown box. The options are solid and dashed:

  • Corners – This property determines the corner radius of the button border. Use the slider to amend this property, or type a numerical value into the property field.
  • Effects – Choose between None and Drop Shadow from the dropdown box. If Drop Shadow is selected, further drop shadow properties are shown.
  • Color – This determines the colour of the drop shadow.
  • Opacity – This determines the transparency of the drop shadow.
  • X Position – This property determines the size of the drop shadow. Both positive and negative integers can be used to place the drop shadow to the left or right of the button.
  • Y Position – This property determines the size of the drop shadow. Both positive and negative integers can be used to place the drop shadow at the top or bottom of the button.
  • Blur – This softens the drop shadow effect.

 

HOVER STATE

The HOVER STATE property is checked by default. Uncheck this if you wish to disable the hover state properties.

  • Hover Text Color – As the mouse moves over the button, the button label text will change to the colour value entered in this property field.
    • Opacity – As the mouse moves over the button, the opacity of the button label text will change to the value entered in this property field.
  • Hover Fill – As the mouse moves over the button, the button background colour will change to the colour value entered in this property field.
    • Opacity – As the mouse moves over the button, the opacity of the button will change to the value entered in this property field.

 

PRESSED STATE

The PRESSED STATE property is checked by default. Uncheck this if you wish to disable the pressed state properties.

  • Pressed Text Color – As the button is clicked, its label text will change to the colour value entered in this property field.
    • Opacity – As the button is clicked, the opacity of its label text will change to the value entered in this property field.
  • Hover Fill – As the button is clicked, its background colour will change to the colour value entered in this property field.
    • Opacity – As the button is clicked, its opacity will change to the value entered in this property field.

 

INTERACTIVITY:

It is possible to disable the button:

Bind the Status property to a cell in the spreadsheet, and either add a value to the Value property or bind it to a cell containing a value in the spreadsheet. When the status property and the value property are equal, the button will be disabled. Leaving these two properties empty will ensure that the button is always enabled.

in Components
Was this article useful?

Related Articles