Wijmo 리본

Wijmo 5에는 Ribbon 컨트롤이 없지만, TabPanel 컨트롤과 Wijmo 입력 모듈의 컨트롤을 사용하여 리본을 간편하게 만들 수 있습니다.

이 예제는 사용자 정의 리본을 사용하여 간단한 텍스트 편집기를 빌드하는 방법을 보여 줍니다.

리본 요소는 TabPanel입니다. 탭 페이지에는 컨트롤 그룹이 행과 열에 정렬되어 있습니다. 그룹의 컨트롤은 Material 아이콘을 사용하며, 각 컨트롤에 할당된 aria-label 특성에 따라 도구 설명이 자동으로 생성됩니다.

탭 헤더 옆에 있는 빈 영역을 두 번 클릭하면 리본 콘텐츠 표시 여부를 토글할 수 있습니다.

Wijmo 알아보기 | TabPanel API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjNav from '@grapecity/wijmo.nav'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // initialize editor element let editor = document.querySelector('#editor'); execCommand('styleWithCSS', true); // if (localStorage.editorContent) { editor.innerHTML = localStorage.editorContent; } // // create ribbon let ribbon = new wjNav.TabPanel('#ribbon'); // // toggle ribbon content visibility on double-clicks, restore on clicks document.querySelector('.wj-tabheaders').addEventListener('dblclick', e => { if (!wjCore.hasClass(e.target, 'wj-tabheader')) { wjCore.toggleClass(ribbon.hostElement, 'hide-content'); } }); document.querySelector('.wj-tabheaders').addEventListener('click', e => { if (wjCore.hasClass(e.target, 'wj-tabheader')) { wjCore.toggleClass(ribbon.hostElement, 'hide-content', false); } }); // // set up combos let fontFace = new wjInput.ComboBox('#font-face', { itemsSource: ['Arial', 'Courier New', 'Garamond', 'Tahoma', 'Times', 'Verdana', 'WingDings'], textChanged: (sender) => execCommand('fontName', sender.text) }); let fontSize = new wjInput.ComboBox('#font-size', { itemsSource: ['Very Small', 'Smaller', 'Small', 'Medium', 'Large', 'Larger', 'Very Large'], selectedIndex: 3, textChanged: (sender) => execCommand('fontSize', sender.selectedIndex + 1) }); // // set up color pickers let clrBack = createColorPicker(sender => execCommand('backColor', sender.value)); document.querySelector('#background').addEventListener('click', e => { wjCore.showPopup(clrBack.hostElement, e.target, false, true, false); clrBack.focus(); }); let clrFore = createColorPicker(sender => execCommand('foreColor', sender.value)); document.querySelector('#color').addEventListener('click', e => { wjCore.showPopup(clrFore.hostElement, e.target, false, true, false); clrFore.focus(); }); // // add tooltips (based on aria-label attribute) addTooltips(ribbon); // // execute commands ribbon.hostElement.addEventListener('click', e => { switch (e.target.id) { // format group case 'save': localStorage.editorContent = editor.innerHTML; alert('Document Saved to Local Storage.'); break; case 'undo': case 'redo': case 'preview': case 'removeFormat': case 'cut': case 'copy': case 'paste': case 'selectAll': execCommand(e.target.id); break; // // font group case 'bold': case 'italic': case 'underline': case 'strikethrough': case 'subscript': case 'superscript': execCommand(e.target.id); break; // case 'click-me': alert('Wijmo Ribbon Sample'); } }); // // execute editor commands function execCommand(cmd, parm) { editor.focus(); document.execCommand(cmd, false, parm); } // // save/restore editor selection on focus changes let selection = null; editor.addEventListener('keyup', () => selection = saveSelection()); editor.addEventListener('mouseup', () => selection = saveSelection()); editor.addEventListener('focus', () => restoreSelection(selection)); // function saveSelection() { let sel = window.getSelection(); return sel && sel.rangeCount ? sel.getRangeAt(0) : null; } // function restoreSelection(range) { if (range) { let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } // // add tooltips based on the element's aria-label attribute function addTooltips(ctl) { let tt = new wjCore.Tooltip(); let els = ctl.hostElement.querySelectorAll('[aria-label]'); for (let i = 0; i < els.length; i++) { tt.setTooltip(els[i], els[i].getAttribute('aria-label')); } } // // create an auto-hiding color picker control function createColorPicker(valueChanged) { // create color picker let host = wjCore.createElement('<div class="wj-dropdown-panel"></div>'); let picker = new wjInput.ColorPicker(host, { lostFocus: function (s) { wjCore.hidePopup(s.hostElement); } }); // // apply color and close picker on clicks host.addEventListener('click', function () { wjCore.hidePopup(host); valueChanged(picker); }); // // done return picker; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo TabPanel Ribbon</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="ribbon"> <!-- Format tab --> <div> <div>Format</div> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="save" class="wj-btn wj-btn-large"> <i class="material-icons">save</i> <br /> Save </button> </div> <div class="wj-column"> <div class="wj-row"> <button id="undo" class="wj-btn" aria-label="Undo"> <i class="material-icons">undo</i> </button> <button id="redo" class="wj-btn" aria-label="Redo"> <i class="material-icons">redo</i> </button> <button id="preview" class="wj-btn" aria-label="Preview"> <i class="material-icons">pageview</i> </button> <button id="removeFormat" class="wj-btn" aria-label="Remove Format"> <i class="material-icons">format_clear</i> </button> </div> <div class="wj-row"> <button id="cut" class="wj-btn" aria-label="Cut"> <i class="material-icons">&#x2702;</i> </button> <button id="copy" class="wj-btn" aria-label="Copy"> <i class="material-icons">&#xE14D;</i> </button> <button id="paste" class="wj-btn" aria-label="Paste"> <i class="material-icons">&#xE85D;</i> </button> <button id="selectAll" class="wj-btn" aria-label="Select All"> <i class="material-icons">select_all</i> </button> </div> </div> </div> <div class="wj-header">Actions</div> </div> <div class="wj-group"> <div class="wj-content"> <div class="wj-row"> <div id="font-face" aria-label="Font Face"></div> <div id="font-size" aria-label="Font Size"></div> <button id="background" class="wj-btn" aria-label="Background Color"> <i class="material-icons">format_color_fill</i> </button> <button id="color" class="wj-btn" aria-label="Text Color"> <i class="material-icons">format_color_text</i> </button> </div> <div class="wj-row"> <button id="bold" class="wj-btn" aria-label="Bold"> <i class="material-icons">format_bold</i> </button> <button id="italic" class="wj-btn" aria-label="Italic"> <i class="material-icons">format_italic</i> </button> <button id="underline" class="wj-btn" aria-label="Underline"> <i class="material-icons">format_underline</i> </button> <button id="strikethrough" class="wj-btn" aria-label="Strikethrough"> <i class="material-icons">format_strikethrough</i> </button> <button id="subscript" class="wj-btn" aria-label="Subscript"> <i class="material-icons">vertical_align_bottom</i> </button> <button id="superscript" class="wj-btn" aria-label="Superscript"> <i class="material-icons">vertical_align_top</i> </button> </div> </div> <div class="wj-header">Font</div> </div> </div> </div> <!-- Custom Tab --> <div> <div>Custom Tab</div> <div> <div class="wj-group"> <div class="wj-content"> <div class="wj-column"> <button id="click-me" class="wj-btn wj-btn-large"> Click Me </button> </div> </div> <div class="wj-header">Custom Group</div> </div> </div> </div> </div> <div id="editor" contenteditable="true"> <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); .wj-tabpane { white-space: nowrap; /* keep groups on a single line */ } .wj-group { display: inline-block; border-right: 1px solid #eee; padding: 3px 6px 0 3px; } .wj-group >.wj-header { text-align: center; background: transparent; font-weight: normal; font-size: 80%; margin-top: 6px; } .wj-group >.wj-content { border: none; height: 5.5em; overflow: visible; } .wj-group .wj-column { display: inline-block; vertical-align: top; } .wj-group .wj-row { margin-bottom: 2px; } .wj-control .wj-group .wj-content .wj-btn { font-weight: normal; padding: 5px 12px; } .wj-group .wj-content .wj-btn.wj-btn-large { padding: 2em 1.5em; } .wj-group .material-icons { font-size: 110%; padding-top: 2px; pointer-events: none; } .wj-group .wj-dropdown { width: 10em; border: none; background: #eee; } /* hide ribbon content */ .wj-tabpanel.hide-content .wj-tabpanes { height: 0; transition: height linear 400ms; } #editor { height: 300px; overflow: auto; padding: 12px; background: #ffe; border: 1px solid #ccc; } body { margin-bottom: 36pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);