diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 7f84faac9e..5ed7badca8 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -125,13 +125,13 @@ cd spreadsheet-app The [Angular Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet) package uses the Ivy-based Angular library distribution [format](https://angular.dev/tools/libraries/angular-package-format) and is compatible with `Angular 12` and above. Use the following command to install the package: ``` -npm install @syncfusion/ej2-angular-spreadsheet +npm install @syncfusion/ej2-angular-spreadsheet --save ``` For `Angular versions below 12`, use the legacy `ngcc` package instead: ``` -npm install @syncfusion/ej2-angular-spreadsheet@ngcc +npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save ``` ## Register a Syncfusion License Key @@ -141,24 +141,21 @@ Before initializing the Syncfusion Angular Spreadsheet component, generate a Syn - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in an Angular Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#angular) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/styles.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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). -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview) for information about the available themes and the different ways to include theme styles in an Angular application. +Add the required Spreadsheet theme style reference to `src/styles.css` file. Replace the existing content with the theme import code below. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +``` ## Add the Syncfusion® Angular Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index 63385fc7c0..7c89e53a47 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -109,27 +109,27 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM - + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 4266d7a64b..3c95e7793a 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -59,30 +59,26 @@ Before initializing any Syncfusion components, generate a Syncfusion license key - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a JavaScript-ES6 Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#javascript-es6--typescript) -## Add CSS references +## Import the required CSS styles -Add the following style references for the Spreadsheet component and its dependent components. +Themes for Spreadsheet 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 Spreadsheet theme style reference to `src/styles/styles.css` file. {% tabs %} {% highlight css tabtitle="~/src/styles/styles.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a TypeScript application. - - ## Add the Syncfusion® Spreadsheet Component to the Application Add a container element for the Spreadsheet component to the `index.html` file, and then initialize the component in the `app.ts` file. diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index cf9e46e4c9..db2feae3e4 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -65,24 +65,21 @@ or yarn add @syncfusion/ej2-react-spreadsheet ``` -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references to the `src/App.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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). -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +Add the required Spreadsheet theme style reference to `src/App.css` file. Replace the existing content with the theme import code below. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +``` ## Add the Syncfusion® React Spreadsheet Component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md index 4ef8741a8a..c75d7d05ae 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md @@ -89,7 +89,7 @@ Here, the [React Spreadsheet component](https://www.syncfusion.com/spreadsheet-e {% tabs %} {% highlight bash tabtitle="NPM" %} -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save {% endhighlight %} {% highlight bash tabtitle="YARN" %} @@ -99,29 +99,26 @@ yarn add @syncfusion/ej2-react-spreadsheet {% endhighlight %} {% endtabs %} -## Import Syncfusion® CSS styles +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references to the `src/app/globals.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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 +``` + +Add the required Spreadsheet theme style reference to `src/app/globals.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="globals.css" %} -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Next.js application. - ## Add Syncfusion® React component Follow the below steps to add the [React Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) component to the Next.js project: diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index daa40e3a8d..96c5220e9a 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -100,24 +100,21 @@ or yarn add @syncfusion/ej2-react-spreadsheet ``` -## Add CSS reference +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/style.css` file. +Themes for Spreadsheet 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). -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +Add the required Spreadsheet theme style reference to `src/style.css` file. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +``` ## Adding Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index 0f562b50cc..5803061b65 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -66,27 +66,24 @@ cd my-react-router-app To include the React Spreadsheet component in your project, use the following command: ```bash -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save ``` -## Adding CSS reference +## Import the required CSS styles -Import the Syncfusion® component themes in the `app.css` file as shown below: +Themes for Spreadsheet 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). -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/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-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +Add the required Spreadsheet theme style reference to `app.css` file. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +``` ## Configure Server-Side Rendering (SSR) diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index 2f977f0d52..97c2094170 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -55,23 +55,21 @@ To install the React Spreadsheet component package, use the following command: npm install @syncfusion/ej2-react-spreadsheet --save ``` -## Add CSS reference -Add the following Spreadsheet and dependent component styles to `~/src/webparts/app/components/App.tsx` file. +## Import the required CSS styles -```ts -require('@syncfusion/ej2-base/styles/tailwind3.css'); -require('@syncfusion/ej2-inputs/styles/tailwind3.css'); -require('@syncfusion/ej2-buttons/styles/tailwind3.css'); -require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css'); -require('@syncfusion/ej2-lists/styles/tailwind3.css'); -require('@syncfusion/ej2-navigations/styles/tailwind3.css'); -require('@syncfusion/ej2-popups/styles/tailwind3.css'); -require('@syncfusion/ej2-dropdowns/styles/tailwind3.css'); -require('@syncfusion/ej2-grids/styles/tailwind3.css'); -require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'); +Themes for Spreadsheet 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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +Add the required Spreadsheet theme style reference to `~/src/webparts/app/components/App.tsx` file. + +```ts +require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); +``` ## Add Spreadsheet Component diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 7d522018ac..8e6611aaa0 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -129,7 +129,7 @@ cd spreadsheet-app Install the [Syncfusion® React Spreadsheet](https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-react-spreadsheet +npm install @syncfusion/ej2-react-spreadsheet --save ``` ## Register a Syncfusion License Key @@ -139,24 +139,21 @@ Before initializing the Syncfusion React Spreadsheet component, generate a Syncf - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a React Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#reactjs) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/index.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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). -```css -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +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 ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +Add the required Spreadsheet theme style reference to `src/index.css` file. Replace the existing content with the theme import code below. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; +``` ## Add the Syncfusion® React Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index dc12b0f383..2257113faf 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md @@ -39,7 +39,7 @@ cd quickstart Install the [Vue Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-vue-spreadsheet +npm install @syncfusion/ej2-vue-spreadsheet --save ``` ## Register a Syncfusion License Key @@ -49,28 +49,26 @@ Before initializing the Syncfusion Vue Spreadsheet control, generate a Syncfusio - [Generate a Syncfusion License Key](https://help.syncfusion.com/document-processing/licensing/how-to-generate) - [Register a Syncfusion License Key in a Vue Application](https://help.syncfusion.com/document-processing/licensing/how-to-register-in-an-application#vuejs) -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component style references in the **\** section. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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). + +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 Spreadsheet theme style reference in the **\** section. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="~/src/App.vue" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. - ## Add the Vue Spreadsheet component to the application Import and register the [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) component directives in the `script` section of **src/App.vue** by replacing the existing code with the following code. Then, define the component in the `template` section. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md index 0aac6b73e9..8214d5c397 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md @@ -115,31 +115,29 @@ cd spreadsheet-app Install the [Vue Spreadsheet Editor](https://www.npmjs.com/package/@syncfusion/ej2-vue-spreadsheet) package from npm using the following command: ``` -npm install @syncfusion/ej2-vue-spreadsheet +npm install @syncfusion/ej2-vue-spreadsheet --save ``` -## Add CSS references +## Import the required CSS styles -Add the following Spreadsheet and dependent component styles to `src/style.css` file. Replace the existing content with the theme import code below. +Themes for Spreadsheet 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). + +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 Spreadsheet theme style reference to `src/style.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight html tabtitle="style.css" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. - ## Add the Vue Spreadsheet component to the application Import and register the [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) component directives in the `script` section of **src/App.vue**. If you use the `Composition API`, add the `setup` attribute to the `script` tag. Then, define the component in the `template` section.