Adding custom styling for custom statefulButton

Technical Support
1

Product: PDFTron

Product Version: 8.12.0

Please give a brief summary of your issue:
(Think of this as an email subject)
I need to add a class name to the statefulButton and style it using stylesheet.
I use NextJS

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I add a custom button to the header as below
instance.UI.setHeaderItems(header => {
header
.getHeader(‘default’)
.get(‘panToolButton’)
.insertAfter({
type: ‘statefulButton’,
initialState: ‘Show’,
states: {
Show: {
// img: ‘icon-header-annotation’,
getContent: () => ‘Add Note’,
onClick: (update: (arg0: string) => void) => {
update(‘Hide’);
enableFeatures([Feature.Annotations]);
},
},
Hide: {
getContent: () => ‘Hide Note’,
onClick: (update: (arg: string) => void) => {
update(‘Show’);
disableFeatures([Feature.Annotations]);
},
},
},
dataElement: ‘showAnnotationButton’,
});
});

I would like to add class name to this button and access it from stylesheet and add required css.
Is it possible? If possible please give me an example.

Along with this can we get the header icons name which we can use with custom buttons
for eg: ‘icon-header-download’, similar to this. Where we can find the list of default icons.

Please provide a link to a minimal sample where the issue is reproducible:

2

Hi p.kk,

  1. For styling, you can access the button’s dataElement or add a className in the state
// add Stateful Button
Show: {
  className: 'show-button',
  ...
},

// custom-stylesheet.css
[data-element="showAnnotationButton"] {
  color: red;
}

// or

.show-button {
  color: red;
}
  1. img and getContent are used to create a button with icon and text. img can be a path to an image or base64 data or the filename of a .svg from the WebViewer assets/icons/ folder

Please see relevant documentation

Regards,

Maggie V.

3

Hi Maggie,

styling the buttons did not work for me as you mentioned.

Regarding the Icons see the below code for download icon

  instance.UI.setHeaderItems((header) => {
    header.getHeader('default').push({
      img: "icon-header-download",
      index: -1,
      type: "actionButton",
      element: 'downloadButton',
      onClick: () => {
        instance.UI.downloadPdf()
      }
    });
  });

This shows download Icon for me. I am asking the similar Icon lists

4

Hi Maggie,

Do you have customElement code snippet for the below UI
image
Basically a toggle button with Icon and text

5

Hi p.kk,

  1. For statefulButton, className should be added to the state. For actionButton, className can be added on the button itself where you declare it.
instance.UI.setHeaderItems(header => {
    header.getHeader('default').push({
      type: 'statefulButton',
      initialState: 'Show',
      states: {
        Show: {
          className: 'showAnnotationButton-show',
          img: 'icon-tool-pen-fill',
          getContent: () => 'Show Note',
          onClick: (update) => {
            update('Hide');
          },
        },
        Hide: {
          className: 'showAnnotationButton-hide',
          img: 'icon-tool-pen-fill',
          getContent: () => 'Hide Note', // remove this for icon-only buttons
          onClick: (update) => {
            update('Show');
          },
        },
      },
      dataElement: 'showAnnotationButton',
      mount: () => { }
    });

// or

   header.getHeader('default').push({
      type: 'actionButton',
      index: -1,
      img: 'icon-tool-pen-line',
      label: 'Another Button', // remove this for icon-only buttons
      dataElement: 'showAnnotationButton',
      className: 'showAnnotationButton',
      onClick: () => { }
    });
  });

  1. For styling them, you’ll need to add your custom CSS stylesheet, see link again Apryse Documentation | Documentation. You might want to adjust button’s width: auto to have both icon and text visible.
    From the above code:
    image

  2. For the list of WebViewer icons, see link again webviewer-ui/assets/icons at master · PDFTron/webviewer-ui · GitHub

  3. For that custom toggle button, you can follow instructions here Apryse Documentation | Documentation and modify the code to your liking to create that custom button.

Regards,

Maggie V.

6

Hello Maggie,

I was trying custom Element and pushed a custom search box in the header. But having difficulty in styling it. How can I add the class and style it. see the custom element JSX

import styles from ‘./SearchInput.module.scss’;

const SearchInput = ({ onChange, onSubmit }) => (

{ onChange(event); }} /> onSubmit()}> Search
);

export default SearchInput;

I use a custom stylesheet as imported above(/SearchInput.module.scss). But when I add a class to div it is not showing in browser DOM when I inspect.

See how I push this element to header

header
.getHeader(‘default’)
.get(‘searchButton’)
.insertBefore({
type: ‘customElement’,
render: () => ,
});

How can I add the class and style it. I use ReactJS

7

Hi p.kk,

Have you tried adding a custom CSS stylesheet, following this documentation https://docs.apryse.com/documentation/web/guides/customizing-styles/#changing-css-properties?

Regards,

Maggie V.