Rubbon for Angular

[Rubal Walia]

Hello,

I want to use ribbon extension in Angular. Is their a way or an example demonstrating the same?

Look ahead to hearing from you very soon.

[jarry]

This is the ribbon example. Be sure to include the ribbon css styles to the 'style.css' file.

Code:

@import 'https://www.jeasyui.com/easyui/ribbon/ribbon.css';
@import 'https://www.jeasyui.com/easyui/ribbon/ribbon-icon.css';

Code:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<h2>Ribbon</h2>
<eui-tabs class="ribbon">
<eui-tab-panel title="Home" bodyCls="ribbon-tab">
<div class="ribbon-group">
<div class="ribbon-toolbar">
<eui-menubutton name="paste" iconCls="icon-paste-large" iconAlign="top" size="large" plain="true">Paste</eui-menubutton>
</div>
<div class="ribbon-toolbar">
<eui-linkbutton name="cut" iconCls="icon-cut" plain="true">Cut</eui-linkbutton><br>
<eui-linkbutton name="copy" iconCls="icon-copy" plain="true">Copy</eui-linkbutton><br>
<eui-linkbutton name="format" iconCls="icon-format" plain="true">Format</eui-linkbutton>
</div>
<div class="ribbon-group-title">Clipboard</div>
</div>
<div class="ribbon-group-sep"></div>
<div class="ribbon-group">
<div class="ribbon-toolbar" style="width:200px"></div>
<div class="ribbon-group-title">other title</div>
</div>
<div class="ribbon-group-sep"></div>
</eui-tab-panel>
</eui-tabs>
`
})
export class AppComponent {
}

[Rubal Walia]

Thanks, the example worked like a charm.