diff --git a/docs/source/developer/ui_helpers.rst b/docs/source/developer/ui_helpers.rst new file mode 100644 index 000000000000..ba32fbb803b0 --- /dev/null +++ b/docs/source/developer/ui_helpers.rst @@ -0,0 +1,48 @@ +User Interface Helpers +---------------------- + +JupyterLab comes with helpers to show or request simple information to user. +Those speed up development and ensure a common look & feel. + +Dialogs +~~~~~~~ + +File Dialogs +'''''''''''' + +Two helper functions to ask a user to open a file or a directory are +available in the ``filebrowser`` package under the namespace ``FileDialog``. + +Here is an example to request a file. + +.. code:: typescript + + const dialog = FileDialog.getExistingDirectory({ + manager, // IDocumentManager + filter: model => model.type == 'notebook' // optional (model: Contents.IModel) => boolean + }); + + const result = await dialog; + + if(result.button.accept){ + let files = result.value; + } + + +And for a folder. + +.. code:: typescript + + const dialog = FileDialog.getExistingDirectory({ + manager // IDocumentManager + }); + + const result = await dialog; + + if(result.button.accept){ + let folders = result.value; + } + +.. note:: The document manager can be obtained in a plugin by requesting + ``IFileBrowserFactory`` service. The manager will be accessed through + ``factory.defaultBrowser.model.manager``. diff --git a/docs/source/index.rst b/docs/source/index.rst index 9683809f890d..02c05ed1fa46 100644 --- a/docs/source/index.rst +++ b/docs/source/index.rst @@ -57,6 +57,7 @@ JupyterLab is the next-generation web-based user interface for Project Jupyter. developer/virtualdom developer/adding_content developer/examples + developer/ui_helpers developer/terminology developer/xkcd_extension_tutorial