EasyUI Forum
December 14, 2024, 04:43:33 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Rubbon for Angular  (Read 15489 times)
Rubal Walia
Newbie
*
Posts: 4


View Profile WWW
« 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.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2279


View Profile Email
« Reply #1 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 {
}
Logged
Rubal Walia
Newbie
*
Posts: 4


View Profile WWW
« Reply #2 on: May 22, 2019, 04:16:03 AM »

Thanks, the example worked like a charm.  Grin
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!