diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-Apryse.md b/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-Apryse.md index d61664eb0e..84cb655d26 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-Apryse.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-Apryse.md @@ -63,15 +63,18 @@ import { PdfViewerModule } from '@syncfusion/ej2-angular-pdfviewer'; export class AppModule {} ``` -Add the required Syncfusion styles in `angular.json` or `styles.css`: +Add the required Syncfusion styles in `angular.json` or `styles.css`. Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Then add the theme import. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Inputs, Navigations, and Popups separately: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## Viewer Initialization Comparison diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-PDFjs.md b/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-PDFjs.md index 4552c11e2e..00482e22ab 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-PDFjs.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/Migration/migrating-from-PDFjs.md @@ -173,17 +173,18 @@ import * as pdfjsLib from 'pdfjs-dist'; ### 4. Configure Styles -Add the following styles globally: +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the theme import globally. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately: ```css -@import '~@syncfusion/ej2-base/styles/material.css'; -@import '~@syncfusion/ej2-buttons/styles/material.css'; -@import '~@syncfusion/ej2-dropdowns/styles/material.css'; -@import '~@syncfusion/ej2-inputs/styles/material.css'; -@import '~@syncfusion/ej2-navigations/styles/material.css'; -@import '~@syncfusion/ej2-popups/styles/material.css'; -@import '~@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '~@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ### 5. Configure Resource URL diff --git a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/angular-universal-ssr.md b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/angular-universal-ssr.md index 3a057ce345..09ab0c033c 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/angular-universal-ssr.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/angular-universal-ssr.md @@ -1,6 +1,6 @@ --- layout: post -title: Angular Universal Ssr in Angular PDF Viewer | Syncfusion +title: Angular Universal SSR in Angular PDF Viewer | Syncfusion description: Learn about the angular universal ssr in the Angular PDF Viewer and how it helps users work with PDF documents more effectively. control: PDF Viewer platform: document-processing @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Angular Universal Ssr in Angular PDF Viewer +# Angular Universal SSR in Angular PDF Viewer This guide shows how to create an Angular Universal SSR application and integrate the Angular PDF Viewer component. @@ -50,18 +50,18 @@ npm install @syncfusion/ej2-angular-pdfviewer ### Step 4: Add Syncfusion CSS Imports -Update `src/app/app.css` with Syncfusion theme imports: +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Update `src/app/app.css` with the PDF Viewer theme import. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## How-to – Integrate PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/ionic-angular.md b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/ionic-angular.md index 0fb93797d7..b375c55afc 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/ionic-angular.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/ionic-angular.md @@ -106,18 +106,21 @@ export class Tab1Page { Place the Syncfusion CSS imports in your global stylesheet (`src/global.scss`). +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + ```css /* Syncfusion styles */ -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-angular-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + ### Step 6: Run the Application Start the development server: diff --git a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/nx-angular.md b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/nx-angular.md index 163b7f8bb9..84340e3022 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/nx-angular.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/nx-angular.md @@ -110,20 +110,22 @@ export class NxWelcome { Since modern Nx versions do not rely on a single `angular.json`, styles can be imported via CSS. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + ### `app.css` ```css -@import '../../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; -@import '../../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +@import '../../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + ## Step 7: Running the Application with PDF Viewer ```bash diff --git a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/vite-angular.md b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/vite-angular.md index 00d69a0010..f3ec593869 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/vite-angular.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/deployment-integration/vite-angular.md @@ -104,19 +104,20 @@ export class App { ``` ### Step 5: Add Syncfusion Styles (app.css) -Open `src/app/app.css` and add the following imports: +Open `src/app/app.css` and add the PDF Viewer theme import. + +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Inputs, Lists, Navigations, Popups, Dropdowns, SplitButtons, and Notifications separately. ```css -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-angular-pdfviewer/styles/material.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ### Step 6: Run the Application diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md index 6efdbeabee..5bde1dbe3d 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started-with-server-backed.md @@ -56,26 +56,28 @@ npm install @syncfusion/ej2-angular-pdfviewer --save {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -Add the following PDF Viewer and dependent component style references to the `src/styles.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required PDF Viewer theme style reference to the `src/styles.css` file: {% tabs %} {% highlight css tabtitle="styles.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + > **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project. ## Add the Syncfusion® Angular PDF Viewer component to the application diff --git a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md index 99d7854c25..0de184519b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/getting-started.md @@ -54,26 +54,28 @@ npm install @syncfusion/ej2-angular-pdfviewer --save {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -Add the following PDF Viewer and dependent component style references to the `src/styles.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required PDF Viewer theme style reference to the `src/styles.css` file: {% tabs %} {% highlight css tabtitle="styles.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + > **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project. ## Add the Syncfusion® Angular PDF Viewer component to the application diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md index 1fd1f8e105..7f2882249b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md @@ -87,18 +87,18 @@ export class AppModule { } ## Adding CSS reference -Add the Angular PDF Viewer component's styles as given below in `src/styles.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the PDF Viewer theme style reference to `src/styles.css`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## Add the PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md index 787905ffaf..f0206b6623 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md @@ -80,18 +80,18 @@ export class AppModule { } ## Adding CSS reference -Add the Angular PDF Viewer component’s styles as given below in `src/styles.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the PDF Viewer theme style reference to `src/styles.css`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## Adding PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md index f9b7828833..29df90d4cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md @@ -94,18 +94,18 @@ export class AppComponent implements OnInit { ## Adding CSS reference -Add the Angular PDF Viewer component’s styles as given below in `src/styles.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages). + +This guide uses the `Tailwind 3` theme as an example. Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the PDF Viewer theme style reference to `src/styles.css`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## Run the application diff --git a/Document-Processing/PDF/PDF-Viewer/angular/theming-and-styling.md b/Document-Processing/PDF/PDF-Viewer/angular/theming-and-styling.md index e3b350a889..b54fa3d48f 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/theming-and-styling.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/theming-and-styling.md @@ -25,18 +25,14 @@ The PDF Viewer styles the toolbar, buttons, panels, annotations, and dialogs bas **Step 1:** Create an Angular PDF Viewer application by following the [Angular PDF Viewer getting started guide](./getting-started). -**Step 2:** Import the required theme CSS files in `angular.json` or `styles.css`. Example for Tailwind theme: +**Step 2:** Install the Tailwind 3 theme package and import its CSS in `angular.json` or `styles.css`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-angular-pdfviewer/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ## Tutorial diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md index be656d660c..4b56bd91c2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started-with-server-backed.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Server-Backed JS PDF Viewer | Syncfusion +title: Getting Started with Server-Backed TS PDF Viewer | Syncfusion description: Set up and run the Syncfusion JavaScript (ES6) PDF Viewer in server-backed mode using a PDF Viewer web service for document processing. platform: document-processing control: PDF Viewer @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started with Server-Backed JS PDF Viewer +# Getting Started with Server-Backed TS PDF Viewer Create and run the **TypeScript PDF Viewer in server-backed mode**. In this mode, PDF rendering and processing are performed on a server-side web service, while the TypeScript application acts as the client. @@ -70,26 +70,28 @@ npm install {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -Add the required Syncfusion styles to `src/styles/styles.css`: +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required PDF Viewer theme style reference to `src/styles/styles.css`: {% tabs %} {% highlight css tabtitle="styles.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. ## Add the PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md index 16f0ce1920..8b9aba5143 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/getting-started.md @@ -60,26 +60,28 @@ npm install {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -Add the required Syncfusion styles to `src/styles/styles.css`: +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the required PDF Viewer theme style reference to `src/styles/styles.css`: {% tabs %} {% highlight css tabtitle="styles.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Notifications separately. + N> Refer to the [Themes topic](https://ej2.syncfusion.com/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a TypeScript project. ## Add the PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md index 23010ec38c..7982d70ec3 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md @@ -43,17 +43,18 @@ mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf - Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling): -Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`): +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +Install the Tailwind 3 theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`). The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. ```css -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle: diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md index de6f0bd56e..061435fd0f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md @@ -100,9 +100,15 @@ yarn add @syncfusion/ej2-react-pdfviewer {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` Where to add the imports: @@ -112,19 +118,14 @@ Where to add the imports: {% tabs %} {% highlight css tabtitle="globals.css" %} -/* PDF Viewer theme and base styles */ -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; +/* PDF Viewer theme */ +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. + N> To learn more about built-in themes and CSS references for individual components, see the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. ## Add the Syncfusion® React component diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md index 1aaa1d9a87..e2c5af95ed 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md @@ -33,18 +33,19 @@ yarn add @syncfusion/ej2-react-pdfviewer How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` -Note: keep import order consistent with component dependencies. +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. ## Add component diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md index f7c08b457c..f1f9480fc9 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md @@ -95,17 +95,18 @@ Vite / plain React (`src/` tree) - File: `src/index.css` (imported from `src/main.tsx`) -Example CSS (same for both): +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +Install the Tailwind 3 theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Example CSS (same for both). The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` Then import the stylesheet according to your starter: diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md index 75b51ff729..0324f9651f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md +++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md @@ -48,20 +48,23 @@ Keep the package version aligned with the runtime assets you host. ## Add Syncfusion CSS -Import the Syncfusion theme styles so the viewer is bundled with the web part. In your React component file (TypeScript example below) import the CSS from node_modules: +Import the Syncfusion theme styles so the viewer is bundled with the web part. Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +In your React component file (TypeScript example below) import the CSS from node_modules: ```ts -import '@syncfusion/ej2-base/styles/material.css'; -import '@syncfusion/ej2-buttons/styles/material.css'; -import '@syncfusion/ej2-dropdowns/styles/material.css'; -import '@syncfusion/ej2-inputs/styles/material.css'; -import '@syncfusion/ej2-navigations/styles/material.css'; -import '@syncfusion/ej2-popups/styles/material.css'; -import '@syncfusion/ej2-splitbuttons/styles/material.css'; -import '@syncfusion/ej2-pdfviewer/styles/material.css'; +import '@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` -If your SPFx build configuration forbids direct CSS imports from node_modules, add these `@import` lines to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN. +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. + +If your SPFx build configuration forbids direct CSS imports from node_modules, add the `@import` line to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN. ## Provide runtime assets and choose rendering mode diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md index 161786934d..f744b8a671 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md @@ -1,16 +1,14 @@ --- layout: post -title: Getting Started with React PDF Viewer | Syncfusion -description: Learn how to get started with the Syncfusion React PDF Viewer control. Explore setup, features, examples, and customization options. +title: React PDF Viewer Getting Started | Syncfusion +description: Learn here all about how to get started with the Syncfusion React PDF Viewer. Explore setup, features, examples, and customization options. control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- - -# Getting Started with React PDF Viewer - +# React PDF Viewer Getting Started If you're starting to integrate the React PDF Viewer into your application, choose the path below that matches how you'll run the viewer in your app (client-only or via a web service) and follow the linked tutorial. diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md index 3b68283fa0..b1fc2418ca 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md @@ -51,25 +51,30 @@ npm install @syncfusion/ej2-react-pdfviewer --save {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -The PDF Viewer depends on several Syncfusion base and helper components (such as buttons, inputs, and popups). Add the following style references to the `src/index.css` file. These stylesheet imports are required for the PDF Viewer and its dependent controls to render correctly. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. + +The required styles for the PDF Viewer are imported in the **src/index.css** file: {% tabs %} -{% highlight css tabtitle="src/index.css" %} +{% highlight css tabtitle="index.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. + ## Add the React PDF Viewer component to the application Add the **React PDF Viewer** component to your `src/App.jsx` or `src/App.tsx` file. diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md index 3df852ccb3..217251e8a3 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md @@ -50,25 +50,30 @@ npm install @syncfusion/ej2-react-pdfviewer --save {% endhighlight %} {% endtabs %} -## Add CSS references +## Import the required CSS styles -Add the following PDF Viewer and dependent component style references to the `src/index.css` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. + +The required styles for the PDF Viewer are imported in the **src/index.css** file: {% tabs %} {% highlight css tabtitle="index.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. + ## Add the Syncfusion® React PDF Viewer component to the application Add the **Syncfusion® React PDF Viewer** component to your `src/App.jsx` or `src/App.tsx` file. diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md index a81606622c..76a8196be0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md @@ -12,55 +12,42 @@ domainurl: ##DomainURL## The following how-to articles and frequently asked questions for the Syncfusion PDF Viewer are listed below. -* [How to add annotation in text search in react?](./how-to/add-annotation-in-text-search-ts) +* [How to add annotation in text search in react?](./how-to/add-annotation-in-text-search) * [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value) -* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button-ts) +* [How to add a save button to PDF Viewer toolbar?](./how-to/add-save-button) * [How to customize the annotation selectors?](./how-to/annotation-selectors) * [How to change the author name of the annotation dynamically?](./how-to/change-author-name-using-annotation-settings) -* [How to clear all the annotations from the PDF document?](./how-to/clear-annotations) -* [How to configure the annotation selector settings?](./how-to/configure-annotationselector-setting-ts) +* [How to clear all the annotations from the PDF document?](./how-to/clear-annotation) +* [How to configure the annotation selector settings?](./how-to/configure-annotation-selector-setting) * [What are the supported conformance or standards of PDF Viewer?](./how-to/conformance) -* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility-ts) -* [How to convert the PDF library bounds to PDF viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts) -* [How to create PDF Viewer service using ASP.NET Core?](./how-to/create-pdfviewer-service-core) -* [How to create PDF viewer web service using ASP.NET MVC?](./how-to/create-pdfviewer-service) -* [How to customize the context menu in PDF Viewer?](./how-to/custom-context-menu) -* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field-ts) -* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts-ts) -* [How to customize text search highlight color in PDF Viewer?](./how-to/customize-text-search-color) +* [How to control the visibility of the annotation?](./how-to/control-annotation-visibility) +* [How to convert the PDF library bounds to PDF Viewer bounds?](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds) + +* [How to add custom font in handwritten signature?](./how-to/custom-font-signature-field) +* [How to add custom fonts for form fields and free text annotations?](./how-to/custom-fonts) * [How to delete a specific annotation from the PDF document?](./how-to/delete-annotation) -* [How to disable the context menu?](./how-to/disable-context-menu) -* [How to disable tile rendering in PDF Viewer?](./how-to/disable-tile-rendering) -* [How to display custom tooltip for annotation?](./how-to/display-custom-tool-tip-for-annotation) -* [How to get the download start event?](./how-to/download-start-event-ts) -* [How to enable or disable the local storage?](./how-to/enable-local-storage-ts) -* [Enable the resizer for text markup annotation?](./how-to/enable-resize) -* [How to enable or disable the text selection?](./how-to/enable-text-selection-ts) -* [How to export the PDF pages as images?](./how-to/export-as-image-ts) -* [How to extract text from the PDF document?](./how-to/extract-text-completed-ts) -* [How to extract text from a specific region?](./how-to/extract-text-option-ts) -* [How to extract text from the PDF document?](./how-to/extract-text-ts) -* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async-ts) -* [How to get the base64 string of the loaded document?](./how-to/get-base64-ts) -* [How to get the page information of the loaded document?](./how-to/get-page-info-ts) -* [How to perform highlight, underline, and strikethrough for the selected text?](./how-to/highlight-underline-strikeout-text) -* [How to identify the added annotation and its mode?](./how-to/identify-added-annotation-mode) -* [How to import annotations from the PDF document?](./how-to/import-annotations) -* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation-ts) +* [How to get the download start event?](./how-to/download-start-event) +* [How to enable or disable the local storage?](./how-to/enable-local-storage) +* [How to enable or disable the text selection?](./how-to/enable-text-selection) +* [How to export the PDF pages as images?](./how-to/export-as-image) +* [How to extract text from the PDF document?](./how-to/extract-text-completed) +* [How to extract text from a specific region?](./how-to/extract-text-option) +* [How to extract text from the PDF document?](./how-to/extract-text) +* [How to find the text in the PDF document asynchronously?](./how-to/find-text-async) +* [How to get the base64 string of the loaded document?](./how-to/get-base64) +* [How to get the page information of the loaded document?](./how-to/getPageInfo) +* [How to import and export annotations in PDF Viewer?](./how-to/import-export-annotation) * [How to load a PDF document in PDF Viewer?](./how-to/load-document) -* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom-ts) -* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark-ts) +* [How to set the minimum and maximum zoom percentage?](./how-to/min-max-zoom) +* [How to open the bookmark pane when the document is loaded?](./how-to/open-bookmark) * [How to open the thumbnail pane when the document is loaded?](./how-to/open-thumbnail) -* [How to get the annotation when it is overlapped with another annotation on its selection?](./how-to/overlapped-annotation) -* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-ts) -* [How to print the PDF document silently?](./how-to/print-document) +* [How to get the page render started and completed event?](./how-to/pagerenderstarted-pagerendercompleted-event) * [How to resolve the `Unable to find an entry point named 'FreeExportedValues' in DLL 'pdfium''?](./how-to/resolve-unable-to-find-an-entry-point-error) -* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode-ts) -* [How to save the PDF document to database or URL?](./how-to/save-pdf-document-to-url) -* [How to select annotations in multi page?](./how-to/select-multi-page-annotations) -* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item-ts) -* [How to show or hide a particular annotation?](./how-to/show-hide-annotation-ts) -* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts) +* [How to restrict the zooming in mobile mode?](./how-to/restricting-zoom-in-mobile-mode) +* [How to show custom stamp item in the stamp annotation?](./how-to/show-custom-stamp-item) +* [How to show or hide a particular annotation?](./how-to/show-hide-annotation) +* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect) * [How to unload the PDF document from the viewer?](./how-to/unload-document) * [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded) * [Integrate PDF Viewer into existing react layouts](./how-to/existing-react-layout) + diff --git a/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-Apryse.md b/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-Apryse.md index 898c593481..ba258ca644 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-Apryse.md +++ b/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-Apryse.md @@ -155,15 +155,18 @@ npm install @syncfusion/ej2-react-pdfviewer 2) Add required CSS and resources -Add the Syncfusion CSS imports to your global stylesheet (e.g., `src/index.css`) and decide whether to use the CDN `resourceUrl` or host `ej2-pdfviewer-lib` locally in `public/`. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Add the Syncfusion CSS import to your global stylesheet (e.g., `src/index.css`) and decide whether to use the CDN `resourceUrl` or host `ej2-pdfviewer-lib` locally in `public/`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Inputs, Navigations, and Popups separately. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` To host local resources, copy: diff --git a/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-PDFjs.md b/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-PDFjs.md index 20e4abfaee..ad6b9827df 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-PDFjs.md +++ b/Document-Processing/PDF/PDF-Viewer/react/migration/migrating-from-PDFjs.md @@ -146,17 +146,18 @@ npm install @syncfusion/ej2-react-pdfviewer Add CSS references and local resources -Syncfusion PDF Viewer requires several CSS packages and (for local hosting) the `ej2-pdfviewer-lib` resources. Add the CSS imports to `src/index.css` and copy the `ej2-pdfviewer-lib` folder into your `public` directory if you host resources locally. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +Install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +Syncfusion PDF Viewer requires the theme package CSS and (for local hosting) the `ej2-pdfviewer-lib` resources. Add the CSS import to `src/index.css` and copy the `ej2-pdfviewer-lib` folder into your `public` directory if you host resources locally. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, and SplitButtons separately. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` To host local resources, copy the `ej2-pdfviewer-lib` folder: diff --git a/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md index e774b2bb55..8eb3710430 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md +++ b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md @@ -25,17 +25,14 @@ The PDF Viewer applies styles to the toolbar, buttons, panels, annotations, and **Step-1:** Create a PDF Viewer sample by following the [React PDF Viewer getting started guide](./getting-started). -**Step-2:** To change the theme to tailwind, add the imports to the tailwind theme in `app.css`. +**Step-2:** To change the theme to tailwind, install the Tailwind 3 theme package and add its import to `app.css`. The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/tailwind3.css"; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css'; ``` ### Tutorial @@ -44,7 +41,7 @@ This short, guided walkthrough shows a minimal end-to-end customization flow: 1. Create a new React app and install the viewer. -2. Add the Tailwind theme imports to your global CSS (see Quick start). +2. Add the Tailwind theme import to your global CSS (see Quick start). 3. Render the PDF Viewer in `src/App` and verify the default look. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md index 9b2b64b799..6778295e70 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md @@ -95,28 +95,30 @@ yarn add @syncfusion/ej2-vue-pdfviewer {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -This section uses the Material theme. Import the required CSS into the ` {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Lists separately. + N> For full details, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme). ## Add Syncfusion® Vue component diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md index 32b6d1c0da..96d0a27fa9 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-with-server-backed.md @@ -54,28 +54,30 @@ yarn add @syncfusion/ej2-vue-pdfviewer {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -Add the required CSS styles for the PDF Viewer component and its dependencies to your `App.vue` file. Syncfusion provides several built-in themes (Material, Fabric, Bootstrap, Tailwind, etc.); this example uses the `Material` theme. The required `Material` CSS styles are imported into the ` {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Lists separately. + N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue project. ## Add the Syncfusion® Vue PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md index db64d1c9ea..30a0256809 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started.md @@ -52,30 +52,30 @@ yarn add @syncfusion/ej2-vue-pdfviewer {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -Add the required CSS styles for the PDF Viewer component and its dependencies to your `App.vue` file. +Themes for PDF Viewer can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/vue/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme). -In this example, the `Material` theme is applied using CSS styles available in the installed packages. The required `Material` CSS styles are imported into the ` {% endhighlight %} {% endtabs %} +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Lists separately. + N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue project. ## Add the Syncfusion® Vue PDF Viewer component diff --git a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md index 8292fb0c3f..15da01bdef 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/quasar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/quasar.md @@ -59,30 +59,30 @@ npm install @syncfusion/ej2-vue-pdfviewer --save {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -Syncfusion® Vue components support multiple theme options. In this example, the `Material 3` theme is applied using CSS styles from the installed packages. Import the required Material 3 CSS styles for the PDF Viewer and its dependencies into the ` {% endhighlight %} {% endtabs %} -N> The order of importing CSS styles should be in line with their dependency graph. +N> The `index.css` file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Lists separately. + N> Refer to the [Themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to learn more about built-in themes and different ways to refer to themes in a Vue project. ## Add the Syncfusion® Vue component diff --git a/Jenkinsfile b/Jenkinsfile index cbec57fa3f..2f04c9fa03 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -1,35 +1,35 @@ -node('content') -{ -timestamps - { - timeout(time: 7200000, unit: 'MILLISECONDS') { -String platform='file-formats'; - try - { - - def Content=""; - env.PATH = "${ProgramFiles}"+"\\Git\\mingw64\\bin;${env.PATH}" - - //Clone scm repository in Workspace source directory - stage ('Checkout') - { - dir('Spell-Checker') - { - checkout scm - +node('content') +{ +timestamps + { + timeout(time: 10800000, unit: 'MILLISECONDS') { +String platform='file-formats'; + try + { + + def Content=""; + env.PATH = "${ProgramFiles}"+"\\Git\\mingw64\\bin;${env.PATH}" + + //Clone scm repository in Workspace source directory + stage ('Checkout') + { + dir('Spell-Checker') + { + checkout scm + def page = 1 while(true) { - def branchCommit = 'https://api.github.com/repos/syncfusion-content/'+env.githubSourceRepoHttpUrl.split('/')[env.githubSourceRepoHttpUrl.split('/').size() - 1]+'/pulls/' + env.pullRequestId + '/files?per_page=100^&page='+ page - - String branchCommitDetails = bat returnStdout: true, script: 'curl -H "Accept: application/vnd.github.v3+json" -u SyncfusionBuild:' + env.GithubBuildAutomation_PrivateToken + " " + branchCommit - - def ChangeFiles= branchCommitDetails.split('"filename": '); - - for (int i= 1; i < ChangeFiles.size();i++) - { - def ChangeFile= ChangeFiles[i].split(',')[0].replace('"', '') - Content += env.WORKSPACE + "\\Spell-Checker\\" + ChangeFile + "\r\n"; + def branchCommit = 'https://api.github.com/repos/syncfusion-content/'+env.githubSourceRepoHttpUrl.split('/')[env.githubSourceRepoHttpUrl.split('/').size() - 1]+'/pulls/' + env.pullRequestId + '/files?per_page=100^&page='+ page + + String branchCommitDetails = bat returnStdout: true, script: 'curl -H "Accept: application/vnd.github.v3+json" -u SyncfusionBuild:' + env.GithubBuildAutomation_PrivateToken + " " + branchCommit + + def ChangeFiles= branchCommitDetails.split('"filename": '); + + for (int i= 1; i < ChangeFiles.size();i++) + { + def ChangeFile= ChangeFiles[i].split(',')[0].replace('"', '') + Content += env.WORKSPACE + "\\Spell-Checker\\" + ChangeFile + "\r\n"; } // Last page @@ -38,54 +38,54 @@ String platform='file-formats'; break } page++ - } - - if (Content) { - writeFile file: env.WORKSPACE+"/cireports/content.txt", text: Content - } - else { - writeFile file: env.WORKSPACE+"/cireports/content.txt", text: "There are no filepaths found for this commit." - } - - } - - //Checkout the ug_spellchecker from development Source - checkout([$class: 'GitSCM', branches: [[name: '*/development']], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'RelativeTargetDirectory', relativeTargetDir: 'ug_spellchecker']], submoduleCfg: [], userRemoteConfigs: [[credentialsId: env.githubCredentialId, url: 'https://github.com/syncfusion-content/ug_spellchecker.git']]]) - - } - } - - catch(Exception e) - { - currentBuild.result = 'FAILURE' - } - -if(currentBuild.result != 'FAILURE') -{ - stage 'Build Source' - try - { - gitlabCommitStatus("Build") - { - bat 'powershell.exe -ExecutionPolicy ByPass -File '+env.WORKSPACE+"/ug_spellchecker/build.ps1 -Script "+env.WORKSPACE+"/ug_spellchecker/build.cake -Target build -Platform \""+platform+"\" -Targetbranch "+env.githubTargetBranch+" -Branch "+'"'+env.githubSourceBranch+'"' - } - - - } - catch(Exception e) - { - currentBuild.result = 'FAILURE' - } -} - - stage 'Delete Workspace' - - def files = findFiles(glob: '**/cireports/*.*') - - if(files.size() > 0) - { - archiveArtifacts artifacts: 'cireports/', excludes: null - } - step([$class: 'WsCleanup']) } - } -} + } + + if (Content) { + writeFile file: env.WORKSPACE+"/cireports/content.txt", text: Content + } + else { + writeFile file: env.WORKSPACE+"/cireports/content.txt", text: "There are no filepaths found for this commit." + } + + } + + //Checkout the ug_spellchecker from development Source + checkout([$class: 'GitSCM', branches: [[name: '*/development']], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'RelativeTargetDirectory', relativeTargetDir: 'ug_spellchecker']], submoduleCfg: [], userRemoteConfigs: [[credentialsId: env.githubCredentialId, url: 'https://github.com/syncfusion-content/ug_spellchecker.git']]]) + + } + } + + catch(Exception e) + { + currentBuild.result = 'FAILURE' + } + +if(currentBuild.result != 'FAILURE') +{ + stage 'Build Source' + try + { + gitlabCommitStatus("Build") + { + bat 'powershell.exe -ExecutionPolicy ByPass -File '+env.WORKSPACE+"/ug_spellchecker/build.ps1 -Script "+env.WORKSPACE+"/ug_spellchecker/build.cake -Target build -Platform \""+platform+"\" -Targetbranch "+env.githubTargetBranch+" -Branch "+'"'+env.githubSourceBranch+'"' + } + + + } + catch(Exception e) + { + currentBuild.result = 'FAILURE' + } +} + + stage 'Delete Workspace' + + def files = findFiles(glob: '**/cireports/*.*') + + if(files.size() > 0) + { + archiveArtifacts artifacts: 'cireports/', excludes: null + } + step([$class: 'WsCleanup']) } + } +}