|
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.
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 { } 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
|