Skip to content

Commit a4222d3

Browse files
Integrated latest changes at 07-25-2024 7:30:19 AM
1 parent 74bba60 commit a4222d3

File tree

9 files changed

+47
-60
lines changed

9 files changed

+47
-60
lines changed

ej2-vue/appearance/figma.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,30 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Figma UI Kits for Syncfusion Components
11+
# Figma UI Kits for Syncfusion Vue Components
1212

13-
Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion components.
13+
Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137), [Fluent](https://www.figma.com/community/file/1385969120047188707), [Tailwind](https://www.figma.com/community/file/1385969065626384098), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272). These kits match the themes used in Syncfusion Vue components.
1414

15-
The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion components.
15+
The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion Vue components.
1616

1717
![Material 3](./images/material3.png)
1818

1919
## Advantages of UI kits
2020

2121
The Syncfusion Figma UI kit offers the following key advantages:
22-
- The UI kit includes detailed information about Syncfusion components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion components.
22+
- The UI kit includes detailed information about Syncfusion Vue components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion Vue components.
2323
- Design components are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
24-
- Developers can seamlessly match Syncfusion components with your design requirements, ensuring alignment and accuracy.
24+
- Developers can seamlessly match Syncfusion Vue components with your design requirements, ensuring alignment and accuracy.
2525
- By using standardized components and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
2626

2727
## Downloading the UI kits
2828

2929
Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links:
3030

31-
- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
32-
- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
33-
- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
34-
- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
31+
- [Material 3](https://www.figma.com/community/file/1385969023252455137)
32+
- [Fluent](https://www.figma.com/community/file/1385969120047188707)
33+
- [Tailwind](https://www.figma.com/community/file/1385969065626384098)
34+
- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272)
3535

3636
## Structure of the UI kits
3737

ej2-vue/document-editor/comments.md

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,28 @@ Document Editor allows you to add comments to documents. You can add, navigate a
1717
Comments can be inserted to the selected text.
1818

1919
```ts
20-
this.$refs.documenteditor.ej2Instances.editor.insertComment("Test comment");
20+
this.$refs.documenteditor.ej2Instances.editor.insertComment('Test comment');
21+
```
22+
23+
## Add a New Comment with Date, Author, and Status
24+
25+
Comments can be inserted into the selected text with a specified date, author, and status.
26+
27+
```ts
28+
// In this example, a comment with the text "Nancy Davolio" is added by the author Rachel Green on July 23, 2024, at 2:30 PM. The isResolved status is set to false.
29+
30+
// Create a specific date: July 23, 2024, at 2:30:00 PM.
31+
let specificDate = new Date(2024, 6, 23, 14, 30, 0); // Note: July is represented by 6 (0-based index).
32+
33+
// Define the properties of the comment including author, date, and resolution status.
34+
let commentProperties: CommentProperties = {
35+
author: 'Nancy Davolio', // The author of the comment.
36+
dateTime: specificDate, // The date and time when the comment is created.
37+
isResolved: false // The status of the comment; false indicates it is unresolved.
38+
};
39+
40+
// Insert the comment with the specified properties into the document editor.
41+
this.$refs.documenteditor.ej2Instances.editor.insertComment('Hello world', commentProperties);
2142
```
2243

2344
## Comment navigation
@@ -142,29 +163,9 @@ The following example illustrates how to enable mention support in the Document
142163
import { DocumentEditorContainerPlugin, DocumentEditorContainerComponent,Toolbar} from '@syncfusion/ej2-vue-documenteditor';
143164
Vue.use(DocumentEditorContainerPlugin);
144165
let mentionData = [
145-
{ "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
146-
{ "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
147-
{ "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
148-
{ "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
149-
{ "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
150-
{ "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
151-
{ "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
152-
{ "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
153-
{ "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
154-
{ "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
155-
{ "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
156-
{ "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
157-
{ "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
158-
{ "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
159-
{ "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
160-
{ "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
161-
{ "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
162-
{ "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
163-
{ "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
164-
{ "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
165-
{ "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
166-
{ "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
167-
{ "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
166+
{ "Name": "Mary Kate", "EmailId": "marry@company.com" },
167+
{ "Name": "Andrew James", "EmailId": "james@company.com" },
168+
{ "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
168169
];
169170
export default {
170171
data() {
Loading
Loading
Loading
Loading
Loading
Loading

ej2-vue/installation-and-upgrade/installation-using-mac-installer.md

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Installation using mac installer in Vue Installation and upgrade component | Syncfusion
3+
title: Installation using mac installer in Vue | Syncfusion
44
description: Learn here all about Installation using mac installer in Syncfusion Vue Installation and upgrade component of Syncfusion Essential JS 2 and more.
55
control: Installation using mac installer
66
platform: ej2-vue
@@ -18,8 +18,8 @@ domainurl: ##DomainURL##
1818

1919
If you receive this alert, follow the below steps for the easiest solution.
2020

21-
1. Right-click the downloaded pkg file.
22-
2. Select the "Open With" option and choose "Installer (Default)". The following pop-up appears.
21+
1. Right-click the downloaded dmg file.
22+
2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears.
2323

2424
![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png)
2525

@@ -29,45 +29,31 @@ domainurl: ##DomainURL##
2929

3030
The steps below show how to install the Essential Studio JavaScript - EJ2 Mac installer.
3131

32-
1. Double-click the Syncfusion Essential Studio JavaScript - EJ2 Mac installer(.pkg) file. The installer Wizard opens. Click Continue.
32+
1. Locate the downloaded dmg file and open the file by double click on it.
3333

3434
![Welcome wizard](images/Mac_Installer1.png)
3535

36-
2. The Software License Agreement wizard will appear. Click the Continue button.
36+
2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar.
3737

3838
![License Agreement](images/Mac_Installer2.png)
3939

40-
3. The License Agreement's Confirmation window will appear. If you have read the Software License Agreement, click **Agree**.
40+
3. Copy the mounted disk file.
4141

4242
![License Agree Confirmation](images/Mac_Installer3.png)
4343

44-
N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key.
45-
46-
4. The Destination select wizard will appear. You can choose which disc to install the Syncfusion Essential Studio for JavaScript - EJ2 Mac installer on here.
47-
48-
![Destination](images/Mac_Installer4.png)
49-
50-
5. The Installation Type wizard will appear. Click Install to begin the standard installation of the Syncfusion Essential Studio JavaScript - EJ2 Mac installer.
51-
52-
![Install Location](images/Mac_Installer5.png)
44+
4. And paste it in "Applications" folder shortcut.
5345

54-
6. The Authentication window will appear. To begin the installation, enter the Mac machine's password and click **Install Software**.
46+
![License Agree Confirmation](images/Mac_Installer4.png)
5547

56-
![Authentication](images/Mac_Installer6.png)
57-
58-
7. The installation process will begin on your machine.
59-
60-
![Installation progress](images/Mac_Installer7.png)
61-
62-
8. Once the installation is complete, the completed screen will be displayed. To exit the installation wizard, click Close.
48+
N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key.
6349

64-
![Installation Completed](images/Mac_Installer8.png)
50+
5. Now you can open the folder to explore the Syncfusion Essential Studio Mac installer.
6551

66-
By default, Mac installer will install the files in following location.
52+
![Destination](Images/destination.JPG)
6753

68-
**Location:** {Documents}\Syncfusion\ {version}\ {platform}
54+
6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select "Eject." Also delete the folder from the Applications.
6955

70-
![Installed Location](images/Mac_Installer9.png)
56+
![Install Location](images/Mac_Installer6.png)
7157

7258
## License key registration in samples
7359

0 commit comments

Comments
 (0)