Ver código fonte

Docs: Move dropdowns framework guide to architecture/ui-library guide.

Maciej Gołaszewski 7 anos atrás
pai
commit
50fc76d1b9

+ 0 - 69
packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

@@ -1,69 +0,0 @@
----
-category: framework-ui
-order: 30
----
-
-# Dropdowns
-
-## Creating ListView dropdown with standard button
-
-```js
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-
-import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-
-const items = [
-	new Model( {
-		label: 'Do Foo',
-		commandName: 'foo'
-	} ),
-	new Model( {
-		label: 'Do Bar',
-		commandName: 'bar'
-	} ),
-];
-
-const dropdownView = createDropdown( locale );
-
-addListToDropdown( dropdownView, items );
-
-// Execute command when an item from the dropdown is selected.
-dropdownView.on( 'execute', evt => {
-	editor.execute( evt.source.commandName );
-	editor.editing.view.focus();
-} );
-```
-
-## Creating Toolbar dropdown with SplitButton
-
-```js
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import bindOneToMany from '@ckeditor/ckeditor5-ui/src/bindings/bindonetomany';
-import { addToolbarToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
-
-buttons.push( new ButtonView() );
-buttons.push( componentFactory.create( 'someExistingButton' ) );
-
-const dropdownView = createDropdown( locale, SplitButtonView );
-
-dropdownView.buttonView.set( {
-	icon: 'some SVG',
-	tooltip: 'My dropdown'
-} );
-
-
-// This will enable toolbar button when any of button in dropdown is enabled.
-bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
-	( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
-);
-
-// Make this a dropdown with toolbar inside dropdown panel.
-addToolbarToDropdown( dropdownView, buttons );
-
-// Execute current action from dropdown's split button action button.
-dropdownView.buttonView.on( 'execute', () => {
-	editor.execute( 'command', { value: model.commandValue } );
-	editor.editing.view.focus();
-} );
-```