Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5f72013

Browse files
authored
Add files via upload
1 parent bd47cdc commit 5f72013

File tree

10 files changed

+219
-1
lines changed

10 files changed

+219
-1
lines changed

‎README.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# getting-started-with-the-vue-dialog-component
1+
# Getting Started with the Vue Dialog Component
2+
23
A quick start project that shows how to create and configure the Syncfusion Vue Dialog component. This project contains code to add a header and footer, change the position of the dialog, resize, drag and animate the dialog.
4+
5+
Refer to the following documentation to learn about the Vue Dialog component:
6+
https://ej2.syncfusion.com/vue/documentation/dialog/vue3-getting-started
7+
8+
Check out this online example of the Vue Dialog component:
9+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/dialog/default
10+
11+
## Project prerequisites
12+
Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
13+
14+
## How to run this application
15+
To run this application, you need to first clone the `getting-started-with-the-vue-dialog-component` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.

‎index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="https://cdn.syncfusion.com/ej2/26.2.4/material.css" rel="stylesheet">
8+
<title>Vite + Vue</title>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/main.js"></script>
13+
</body>
14+
</html>

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-popups": "^26.2.5",
13+
"vue": "^3.4.31"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.5",
17+
"vite": "^5.3.4"
18+
}
19+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/App.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup>
2+
import {DialogComponent as EjsDialog} from '@syncfusion/ej2-vue-popups';
3+
import {ref} from 'vue';
4+
const visible = ref(true);
5+
const dlgBtnClick = () => {
6+
visible.value = false
7+
};
8+
const buttons = [{click: dlgBtnClick, buttonModel: {content: 'Cancel'}}];
9+
const handleClick = () => {
10+
visible.value = true
11+
};
12+
const position = {X:'center',Y:'center'};
13+
const resizeHandles = ['All'];
14+
const animation = {effect:'FlipXUp'};
15+
</script>
16+
17+
<template>
18+
<button class="e-btn" @click="handleClick">Open Dialog</button>
19+
<ejs-dialog height="160px" width="350px"
20+
header="Dialog" content="This is a Dialog with content"
21+
:buttons="buttons" :visible="visible"
22+
showCloseIcon="true" :position="position"
23+
allowDragging="true" enableResize="true"
24+
:resizeHandles="resizeHandles" :animationSettings="animation"
25+
isModel="true">
26+
</ejs-dialog>
27+
</template>
28+
29+
<style scoped>
30+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
31+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
32+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
33+
</style>
34+

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/components/HelloWorld.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Learn more about IDE Support for Vue in the
30+
<a
31+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32+
target="_blank"
33+
>Vue Docs Scaling up Guide</a
34+
>.
35+
</p>
36+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37+
</template>
38+
39+
<style scoped>
40+
.read-the-docs {
41+
color: #888;
42+
}
43+
</style>

‎src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import {registerLicense} from '@syncfusion/ej2-base';
5+
registerLicense("Ngo9BigBOggjHTQxAR8/V1NCaF1cWWhBYVJxWmFZfVpgdV9EYFZQR2YuP1ZhSXxXdkJhXH9ZdXdVRWFcVkA=");
6+
7+
createApp(App).mount('#app')

‎src/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
button {
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
button:hover {
50+
border-color: #646cff;
51+
}
52+
button:focus,
53+
button:focus-visible {
54+
outline: 4px auto -webkit-focus-ring-color;
55+
}
56+
57+
.card {
58+
padding: 2em;
59+
}
60+
61+
#app {
62+
max-width: 1280px;
63+
margin: 0 auto;
64+
padding: 2rem;
65+
text-align: center;
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

‎vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /