P
CUI v1.20.1177
Documentation and examples in using Menu with PCUI
<link href="~/PCUIAssets/PCUI/Components/Menu/css/Menu.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/Menu/js/Menu.js"></script>
<div class="pcui" id="default-menus">
<pcui_menu :items="items"
:on-select="handleItemOnClick">
<button slot="activator"
v-text="'Button'"
class="ui button button-default">
</button>
</pcui_menu>
<pcui_menu :items="items"
:on-select="handleItemOnClick">
<div slot="activator"
v-text="'Text'">
</div>
</pcui_menu>
<pcui_menu :items="items"
:on-select="handleItemOnClick">
<button slot="activator">
<span style="color:#888" class="fas fa-ellipsis-h"></span>
</button>
</pcui_menu>
</div>
new Vue({
el: '#default-menus',
data: function () {
return {
items: [
{
subItems: [
{
content: 'Click me 1',
},
{
content: 'Click me 2',
},
{
content: 'Click me 3',
},
{
content: 'Click me 4',
}
]
}
]
};
},
components: {
pcui_menu: PCUIMenuComponent
},
methods: {
handleItemOnClick: function (item) {
console.log(item.content);
}
}
});
<div class="pcui" id="grouped-items-menus">
<pcui_menu :items="groupedItems"
:on-select="handleItemOnClick">
<button slot="activator"
v-text="'Button'"
class="ui button button-default">
</button>
</pcui_menu>
<pcui_menu :items="groupedItems"
:on-select="handleItemOnClick">
<div slot="activator"
v-text="'Text'">
</div>
</pcui_menu>
<pcui_menu :items="groupedItems"
:on-select="handleItemOnClick">
<button slot="activator">
<span style="color:#888" class="fas fa-ellipsis-h"></span>
</button>
</pcui_menu>
</div>
new Vue({
el: '#grouped-items-menus',
data: function () {
return {
groupedItems: [
{
subItems: [
{
content: 'Click me 1',
},
{
content: 'Click me 2',
}
]
},
{
subItems: [
{
content: 'Click me 3',
},
{
content: 'Click me 4',
},
{
content: 'Click me 5',
},
{
content: 'Click me 6',
}
]
},
{
subItems: [
{
content: 'Click me 7',
}
]
}
]
};
},
components: {
pcui_menu: PCUIMenuComponent
},
methods: {
handleItemOnClick: function (item) {
console.log(item.content);
}
}
});
<div class="pcui" id="icons-menus">
<pcui_menu :items="itemsWithIcons"
:on-select="handleItemOnClick">
<button slot="activator"
v-text="'Button'"
class="ui button button-default">
</button>
</pcui_menu>
<pcui_menu :items="itemsWithIcons"
:on-select="handleItemOnClick">
<div slot="activator"
v-text="'Text'">
</div>
</pcui_menu>
<pcui_menu :items="itemsWithIcons"
:on-select="handleItemOnClick">
<button slot="activator">
<span style="color:#888" class="fas fa-ellipsis-h"></span>
</button>
</pcui_menu>
</div>
new Vue({
el: '#icons-menus',
data: function () {
return {
itemsWithIcons: [
{
subItems: [
{
content: 'Click me 1',
iconClass: 'fas fa-check-circle'
},
{
content: 'Click me 2',
iconClass: 'fas fa-cloud-download-alt'
},
{
content: 'Click me 3'
},
{
content: 'Don\'t click me',
iconClass: 'ion-android-close'
}
]
}
]
};
},
components: {
pcui_menu: PCUIMenuComponent
},
methods: {
handleItemOnClick: function (item) {
console.log(item.content);
}
}
});
<div class="pcui" id="themeable-menus">
<pcui_menu :items="items"
:on-select="handleItemOnClick"
:theme="'info'">
<button slot="activator"
v-text="'Info'"
class="ui button button-solid info-btn">
</button>
</pcui_menu>
<pcui_menu :items="items"
:on-select="handleItemOnClick"
:theme="'success'">
<button slot="activator"
v-text="'Success'"
class="ui button button-solid success-btn">
</button>
</pcui_menu>
<pcui_menu :items="items"
:on-select="handleItemOnClick"
:theme="'warning'">
<button slot="activator"
v-text="'Warning'"
class="ui button button-solid warning-btn">
</button>
</pcui_menu>
<pcui_menu :items="items"
:on-select="handleItemOnClick"
:theme="'danger'">
<button slot="activator"
v-text="'Danger'"
class="ui button button-solid danger-btn">
</button>
</pcui_menu>
</div>
new Vue({
el: '#themeable-menus',
data: function () {
return {
items: [
{
subItems: [
{
content: 'Click me 1',
},
{
content: 'Click me 2',
},
{
content: 'Click me 3',
},
{
content: 'Click me 4',
}
]
}
]
};
},
components: {
pcui_menu: PCUIMenuComponent
},
methods: {
handleItemOnClick: function (item) {
console.log(item.content);
}
}
});
<div class="pcui" id="mix-it-up-menus">
<pcui_menu :items="mixedItems"
:on-select="handleItemOnClick">
<button slot="activator"
v-text="'Button'"
class="ui button button-default">
</button>
</pcui_menu>
<pcui_menu :items="mixedItems"
:on-select="handleItemOnClick"
:theme="'info'">
<button slot="activator"
v-text="'Info'"
class="ui button button-solid info-btn">
</button>
</pcui_menu>
<pcui_menu :items="mixedItems"
:on-select="handleItemOnClick"
:theme="'success'">
<button slot="activator"
v-text="'Success'"
class="ui button button-solid success-btn">
</button>
</pcui_menu>
<pcui_menu :items="mixedItems"
:on-select="handleItemOnClick"
:theme="'warning'">
<button slot="activator"
v-text="'Warning'"
class="ui button button-solid warning-btn">
</button>
</pcui_menu>
<pcui_menu :items="mixedItems"
:on-select="handleItemOnClick"
:theme="'danger'">
<button slot="activator"
v-text="'Danger'"
class="ui button button-solid danger-btn">
</button>
</pcui_menu>
</div>
new Vue({
el: '#mix-it-up-menus',
data: function () {
return {
mixedItems: [
{
subItems: [
{
content: 'Clone',
iconClass: 'fas fa-laptop-code'
},
{
content: 'Fork',
iconClass: 'fas fa-code-branch'
}
]
},
{
subItems: [
{
content: 'New file',
iconClass: 'fas fa-file'
},
{
content: 'New folder',
iconClass: 'fas fa-folder'
},
{
content: 'Upload file(s)',
iconClass: 'fas fa-upload'
}
]
},
{
subItems: [
{
content: 'Download as Zip',
iconClass: 'fas fa-download'
}
]
},
{
subItems: [
{
content: 'Hide files tree'
}
]
}
]
};
},
components: {
pcui_menu: PCUIMenuComponent
},
methods: {
handleItemOnClick: function (item) {
console.log(item.content);
}
}
});