Show dialog
:global(.custom-css-class-button-right) { float: right; color: #C10000; } :global(.form-with-inputs) { margin-top: -16px; } :global(.long-page) { height: 2000px; } :global(.high-field.high-field) { padding: 0; line-height: 32px; } import 'angular/angular'; import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng'; import Select from '@jetbrains/ring-ui/components/select-ng/select-ng'; import Button from '@jetbrains/ring-ui/components/button-ng/button-ng'; import Input from '@jetbrains/ring-ui/components/input-ng/input-ng'; angular.module('Example.dialog', [Dialog, Select, Button, Input]). controller('ExampleCtrl', function ($q, $timeout, dialog) { this.showDialog = function () { dialog.show({ cssClass: 'custom-css-class', title: 'Test', closeOnClick: true, shortcuts: { 'ctrl+enter': angular.noop }, template: document.getElementById('dialog-template').innerHTML, controllerAs: 'dialogExampleCtrl', controller: 'DialogExampleCtrl', buttons: [ { label: 'Save', default: true, action: angular.noop }, { label: 'Cancel', close: true }, { label: 'Dangerous Action', cssClasses: 'custom-css-class-button-right', action: function () { return $timeout(angular.noop, 2000). then(() => $q.reject('Some error')); } } ] }) .catch(() => console.log('dialog rejected')); }; $timeout(() => this.showDialog()); }). controller('DialogExampleCtrl', function () { var dialogExampleCtrl = this; dialogExampleCtrl.arr = [{name: 'Ada'}, {name: 'Nik'}]; });
Show dialog
import angular from 'angular'; import Sidebar from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng' import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng'; import Select from '@jetbrains/ring-ui/components/select-ng/select-ng'; import Button from '@jetbrains/ring-ui/components/button-ng/button-ng'; import Input from '@jetbrains/ring-ui/components/input-ng/input-ng'; angular.module('Example.dialog', [Dialog, Select, Button, Sidebar, Input]). controller('ExampleCtrl', function ($q, $timeout, dialogInSidebar) { this.showDialog = function () { dialogInSidebar.show({ title: 'Test', shortcuts: { 'ctrl+enter': angular.noop }, template: document.getElementById('dialog-template').innerHTML, controllerAs: 'dialogExampleCtrl', controller: function () { this.arr = [{name: 'Ada'}, {name: 'Nik'}]; }, buttons: [ { label: 'Save', default: true, action: angular.noop }, { label: 'Cancel', close: true } ] }); }; $timeout(() => this.showDialog(), 500); });
Show dialog
:global(.long-page) { height: 2000px; } :global(.custom-css-class) { padding: 40px; } import angular from 'angular'; import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng'; import Button from '@jetbrains/ring-ui/components/button-ng/button-ng'; import Input from '@jetbrains/ring-ui/components/input-ng/input-ng'; angular.module('Example.dialog', [Dialog, Button, Input]). controller('ExampleCtrl', function ($q, $timeout, dialog) { this.showDialog = function () { dialog.show({ cssClass: 'custom-css-class', title: 'Test', closeOnClick: true, template: document.getElementById('dialog-template').innerHTML, controllerAs: 'dialogExampleCtrl', controller: function () {}, }).catch(() => console.log('dialog rejected')); }; $timeout(() => this.showDialog()); });