Title: Rubbon for Angular
Post by: Rubal Walia on May 20, 2019, 06:13:11 AM
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.
Title: Re: Rubbon for Angular
Post by: jarry on May 21, 2019, 06:56:00 PM
This is the ribbon example. Be sure to include the ribbon css styles to the 'style.css' file. @import 'https://www.jeasyui.com/easyui/ribbon/ribbon.css';
@import 'https://www.jeasyui.com/easyui/ribbon/ribbon-icon.css';
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 {
}
Title: Re: Rubbon for Angular
Post by: Rubal Walia on May 22, 2019, 04:16:03 AM
Thanks, the example worked like a charm. ;D
|