forked from syncfusion/ej2-vue-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsplit-button.vue
171 lines (151 loc) · 16.3 KB
/
split-button.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<template>
<div class="control-section">
<div class="sb-split-button-section">
<div id="sb-split-button-control">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
<ejs-splitbutton :items="items" iconCss="e-sb-btn-icons e-paste"></ejs-splitbutton>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
<ejs-splitbutton :items="items" content="Paste"></ejs-splitbutton>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
<ejs-splitbutton :items="items" content="Paste" iconCss="e-sb-btn-icons e-paste"></ejs-splitbutton>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 col-md-3">
<ejs-splitbutton :items="items" content="Paste" iconCss="e-sb-btn-icons e-paste" :beforeItemRender="beforeItemRender"></ejs-splitbutton>
</div>
</div>
</div>
</div>
<div id="action-description">
<p>This sample demonstrates the default functionalities of the SplitButton. By clicking primary button default action will
be triggered and clicking secondary button will display popup with list of action items.
</p>
</div>
<div id="description">
<p>
The SplitButton component has primary and secondary buttons. Primary button is used to select default action and secondary
button is used to toggle contextual overlays for displaying list of action items. It can contain both text and images.
</p>
<p>
In this sample, SplitButton contains icon, content and list of action items, and can be added using
<code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#iconcss">iconCss,
</a></code>
<code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#content">content
</a></code>and
<code><a target="_blank" class="code" href="https://ej2.syncfusion.com/vue/documentation/api/split-button/#items">items
</a></code>property.
</p>
<p>
More information about SplitButton can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/vue/documentation/split-button/getting-started">
documentation section</a>.
</p>
</div>
</div>
</template>
<style>
/* custom code start */
#sb-split-button-control {
width: 100%;
margin: 11% 0;
text-align: center;
}
.sb-split-button-section {
width: 80%;
margin: auto;
}
#sb-split-button-control .col-sm-6 {
margin: 25px 0;
}
/* custom code end */
/* SplitButton sample icons */
@font-face {
font-family: 'e-sb-btn-icons';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,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IABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBSAGUAZwB1AGwAYQByAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAEUASgAyACAAUwBwAGwAaQB0ACAAYgB1AHQAdABvAG4AIABwAGEAcwB0AGUAIABpAGMAbwBuAHMAIABmAG8AcgAgAHQAaABlAG0AZQBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABFAEoAMgAgAFMAcABsAGkAdAAgAGIAdQB0AHQAbwBuACAAcABhAHMAdABlACAAaQBjAG8AbgBzACAAZgBvAHIAIAB0AGgAZQBtAGUAcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAA5QYXN0ZV9NYXRlcmlhbBVQYXN0ZVNwZWNpYWxfTWF0ZXJpYWwWUGFzdGVGb3JtdWxhX0Jvb3RzdHJhcBhQYXN0ZUh5cGVybGlua19Cb290c3RyYXAWUGFzdGVTcGVjaWFsX0Jvb3RzdHJhcBVQYXN0ZUZvcm11bGFfTWF0ZXJpYWwPUGFzdGVfQm9vdHN0cmFwF1Bhc3RlSHlwZXJsaW5rX01hdGVyaWFsE1Bhc3RlTWFpbl9Cb290c3RyYXASUGFzdGVNYWluX01hdGVyaWFsBVBhc3RlDlBhc3RlQXNGb3JtdWxhDFBhc3RlU3BlY2lhbBBQYXN0ZUFzSHlwZXJsaW5rAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}
.e-sb-btn-icons {
font-family: "e-sb-btn-icons";
font-weight: normal;
}
.e-sb-btn-icons.e-paste::before {
content: "\e700";
}
.e-sb-btn-icons.e-paste-special::before {
content: "\e701";
}
.e-sb-btn-icons.e-paste-formula::before {
content: "\e705";
}
.e-sb-btn-icons.e-paste-hyperlink::before {
content: "\e707";
}
.material .e-sb-btn-icons.e-paste::before,
.bootstrap .e-sb-btn-icons.e-paste::before {
content: "\e706";
}
.material .e-sb-btn-icons.e-paste-special::before,
.bootstrap .e-sb-btn-icons.e-paste-special::before {
content: "\e704";
}
.material .e-sb-btn-icons.e-paste-formula::before,
.bootstrap .e-sb-btn-icons.e-paste-formula::before {
content: "\e702";
}
.material .e-sb-btn-icons.e-paste-hyperlink::before,
.bootstrap .e-sb-btn-icons.e-paste-hyperlink::before {
content: "\e703";
}
.bootstrap4 .e-sb-btn-icons.e-paste::before {
content: '\e739';
}
.bootstrap4 .e-sb-btn-icons.e-paste-special::before {
content: '\e813';
}
.bootstrap4 .e-sb-btn-icons.e-paste-formula::before {
content: '\e812';
}
.bootstrap4 .e-sb-btn-icons.e-paste-hyperlink::before {
content: '\e814';
}
</style>
<script>
import Vue from "vue";
import { SplitButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
Vue.use(SplitButtonPlugin);
export default Vue.extend({
data: function() {
return {
items: [
{
text: "Paste",
iconCss: "e-sb-btn-icons e-paste"
},
{
text: "Paste Special",
iconCss: "e-sb-btn-icons e-paste-special"
},
{
text: "Paste as Formula",
iconCss: "e-sb-btn-icons e-paste-formula"
},
{
text: "Paste as Hyperlink",
iconCss: "e-sb-btn-icons e-paste-hyperlink"
}
]
};
},
methods: {
beforeItemRender: function(args) {
if (args.item.text !== "Paste") {
args.element.classList.add("e-disabled");
}
}
}
});
</script>