Skip to content

Commit 58a8602

Browse files
JosephHersonJosephHerson
committed
926228: Update code snippets
1 parent 6610ed2 commit 58a8602

File tree

11 files changed

+292
-0
lines changed

11 files changed

+292
-0
lines changed

‎ej2-vue/code-snippet/common/css-value-cs1/tailwind3.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
:root{
2+
--color-sf-content-bg-color: rgba(255, 255, 255);
3+
--color-sf-content-bg-color-alt1: #f9fafb;
4+
--color-sf-content-bg-color-alt2: #f3f4f6;
5+
--color-sf-content-bg-color-alt3: #e5e7eb;
6+
--color-sf-content-bg-color-alt4: #9ca3af;
7+
--color-sf-content-bg-color-alt5: #6b7280;
8+
--color-sf-content-bg-color-hover: #f9fafb;
9+
--color-sf-content-bg-color-pressed: #f3f4f6;
10+
--color-sf-content-bg-color-focus: #f9fafb;
11+
--color-sf-content-bg-color-selected: #e5e7eb;
12+
--color-sf-content-bg-color-dragged: #f3f4f6;
13+
--color-sf-content-bg-color-disabled: #ffffff;
14+
--color-sf-flyout-bg-color: #ffffff;
15+
--color-sf-flyout-bg-color-hover: #f3f4f6;
16+
--color-sf-flyout-bg-color-pressed: #e5e7eb;
17+
--color-sf-flyout-bg-color-focus: #f3f4f6;
18+
--color-sf-flyout-bg-color-selected: #e5e7eb;
19+
--color-sf-flyout-bg-color-disabled: #fff;
20+
--color-sf-overlay-bg-color: rgba(107, 114, 128, 74.9);
21+
--color-sf-table-bg-color-hover: #f9fafb;
22+
--color-sf-table-bg-color-pressed: #f3f4f6;
23+
--color-sf-table-bg-color-selected: #e5e7eb;
24+
--color-sf-text-input-bg-color: #ffffff;
25+
--color-sf-treeview-item-active-hover-bg: #e5e7eb;
26+
}

‎ej2-vue/code-snippet/common/tailwind3-cs1/app.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div>
3+
<div>
4+
<ejs-checkbox label='Default' v-model="isCheckboxChecked" @change="toggleBodyClass"></ejs-checkbox><br/>
5+
<ejs-button cssClass='e-primary'>Button</ejs-button>
6+
<ejs-button cssClass='e-success'>Button</ejs-button>
7+
<ejs-button cssClass='e-info'>Button</ejs-button>
8+
<ejs-button cssClass='e-warning'>Button</ejs-button>
9+
<ejs-button cssClass='e-danger'>Button</ejs-button>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import Vue from 'vue';
16+
import {
17+
ButtonComponent,
18+
CheckBoxComponent,
19+
} from '@syncfusion/ej2-vue-buttons';
20+
import { enableRipple } from '@syncfusion/ej2-base';
21+
22+
enableRipple(true);
23+
Vue.use(CheckBoxPlugin);
24+
Vue.use(ButtonPlugin);
25+
26+
export default {
27+
name: 'App',
28+
components: {
29+
'ejs-button': ButtonComponent,
30+
'ejs-checkbox': CheckBoxComponent,
31+
},
32+
data() {
33+
return {
34+
isCheckboxChecked: false,
35+
};
36+
},
37+
methods: {
38+
toggleBodyClass() {
39+
if (this.isCheckboxChecked) {
40+
document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here
41+
} else {
42+
document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here
43+
}
44+
},
45+
},
46+
}
47+
</script>
48+
49+
<style>
50+
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
51+
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
52+
53+
.e-checkbox-wrapper {
54+
margin-top: 18px;
55+
}
56+
button {
57+
margin: 25px 5px 20px 20px;
58+
}
59+
.dark
60+
{
61+
background-color:black;
62+
}
63+
</style>

‎ej2-vue/code-snippet/common/tailwind3-cs1/index.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
button {
2+
margin: 25px 5px 20px 20px;
3+
}
4+
5+
.e-checkbox-wrapper {
6+
margin-top: 18px;
7+
}
8+
9+
.dark {
10+
background-color: black;
11+
}

‎ej2-vue/code-snippet/common/tailwind3-cs1/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
22+
</html>
23+

‎ej2-vue/code-snippet/common/tailwind3-cs1/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
import Vue from 'vue';
3+
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
4+
import { enableRipple } from '@syncfusion/ej2-base';
5+
import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons';
6+
7+
enableRipple(true);
8+
Vue.use(ButtonPlugin);
9+
Vue.use(CheckBoxPlugin);
10+
11+
new Vue({
12+
el: '#app',
13+
data() {
14+
return {
15+
isCheckboxChecked: false,
16+
};
17+
},
18+
methods: {
19+
toggleBodyClass() {
20+
if (this.isCheckboxChecked) {
21+
document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here
22+
} else {
23+
document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here
24+
}
25+
},
26+
},
27+
template: `
28+
<div>
29+
<ejs-checkbox label='Default' v-model="isCheckboxChecked" @change="toggleBodyClass"></ejs-checkbox><br/>
30+
<ejs-button cssClass='e-primary'>Button</ejs-button>
31+
<ejs-button cssClass='e-success'>Button</ejs-button>
32+
<ejs-button cssClass='e-info'>Button</ejs-button>
33+
<ejs-button cssClass='e-warning'>Button</ejs-button>
34+
<ejs-button cssClass='e-danger'>Button</ejs-button>
35+
</div>
36+
`,
37+
});

‎ej2-vue/code-snippet/common/tailwind3-cs1/systemjs.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
20+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
21+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
22+
}
23+
});
24+
25+
System.import('index.js');

‎ej2-vue/code-snippet/common/tailwind3-cs2/app.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<ejs-button cssClass='e-primary'>Button</ejs-button>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Vue from 'vue';
9+
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
10+
import { enableRipple } from '@syncfusion/ej2-base';
11+
12+
enableRipple(true);
13+
14+
export default {
15+
name: 'App',
16+
components: {
17+
'ejs-button': ButtonComponent
18+
}
19+
}
20+
</script>
21+
22+
<style>
23+
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
24+
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
25+
26+
button {
27+
margin: 25px 5px 20px 20px;
28+
}
29+
:root {
30+
--color-sf-primary-bg-color: #a5b4fc;
31+
}
32+
</style>

‎ej2-vue/code-snippet/common/tailwind3-cs2/index.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
button {
2+
margin: 25px 5px 20px 20px;
3+
}
4+
5+
:root {
6+
--color-sf-primary: 104, 134, 164;
7+
}

‎ej2-vue/code-snippet/common/tailwind3-cs2/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
22+
</html>
23+

‎ej2-vue/code-snippet/common/tailwind3-cs2/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
import Vue from 'vue';
3+
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
4+
import { enableRipple } from '@syncfusion/ej2-base';
5+
6+
enableRipple(true);
7+
Vue.use(ButtonPlugin);
8+
9+
new Vue({
10+
el: '#app',
11+
data() {
12+
return {
13+
};
14+
},
15+
template: `
16+
<div>
17+
<ejs-button cssClass='e-primary'>Button</ejs-button>
18+
</div>
19+
`,
20+
});

‎ej2-vue/code-snippet/common/tailwind3-cs2/systemjs.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
20+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
21+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
22+
}
23+
});
24+
25+
System.import('index.js');

0 commit comments

Comments
 (0)