瀏覽代碼

Docs: Updated the dropdown framework guide stub.

Maciej Gołaszewski 7 年之前
父節點
當前提交
91f9f32823
共有 1 個文件被更改,包括 33 次插入32 次删除
  1. 33 32
      packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

+ 33 - 32
packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

@@ -5,17 +5,47 @@ 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, createSplitButtonDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+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 = createSplitButtonDropdown( locale );
+const dropdownView = createDropdown( locale, SplitButtonView );
 
 dropdownView.set( {
 	icon: 'some SVG',
@@ -32,37 +62,8 @@ bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
 addToolbarToDropdown( dropdownView, buttons );
 
 // Execute current action from dropdown's split button action button.
-dropdownView.on( 'execute', () => {
+dropdownView.buttonView.on( 'execute', () => {
 	editor.execute( 'command', { value: model.commandValue } );
 	editor.editing.view.focus();
 } );
 ```
-
-## 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();
-} );
-```