Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/advanced_usage.rst
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Advanced Usage
Slots are used to add content at a certain location in a widget. You can find out what slots a widget supports by using
the Vuetify documentation. If you want to know what slots :code:`Select` has, search for :code:`v-select` on the
`Vuetify API explorer <https://v2.vuetifyjs.com/components/api-explorer/>`_ or for this example use the `direct link
<https://v2.vuetifyjs.com/en/components/selects/#api>`_. On the left-hand side of list of attributes you will find a tab
<https://v2.vuetifyjs.com/en/components/selects/#api>`_. On the left-hand side of the list of attributes you will find a tab
'slots'.

An example for using the slot 'no-data', which changes what the Select widget shows when it has no items:
Expand Down Expand Up @@ -101,7 +101,7 @@ exposes it as the 'on' variable.
Responsive Layout
-----------------

When making dashbords with Voilà you can change the layout depending on the users screen size. This is done with a `grid
When making dashboards with Voilà you can change the layout depending on the user's screen size. This is done with a `grid
system <https://v2.vuetifyjs.com/en/components/grids/>`_. For example on a laptop (breakpoint md) you could fit two
elements next to each other while on a smartphone (defined with 'cols' as default) you would want one element to take up
the full width:
Expand Down
7 changes: 4 additions & 3 deletions docs/conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

# -- General configuration ---------------------------------------------------

extensions = ["jupyter_sphinx", "sphinx_rtd_theme", "sphinx_design"]
extensions = ["jupyter_sphinx", "sphinx_design"]
templates_path = ["_templates"]
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]

Expand All @@ -24,6 +24,9 @@
html_theme = "pydata_sphinx_theme"
html_static_path = ["_static"]
html_css_files = ["custom.css"]
html_sidebars = {
"**": [],
}

# -- Theme configuration -----------------------------------------------------

Expand All @@ -34,8 +37,6 @@
"secondary_sidebar_items": [
"page-toc.html",
"searchbox.html",
"edit-this-page.html",
"sourcelink.html",
],
"icon_links": [
{
Expand Down
2 changes: 1 addition & 1 deletion docs/fruit-selector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<v-btn @click="addBanana" :disabled="hasBanana">Add banana</v-btn>
<v-btn @click="removeBanana" :disabled="!hasBanana">Remove banana</v-btn>
<v-btn @click="add_fruit_python()" :disabled="!can_add_from_python"
>Add from Pyton</v-btn
>Add from Python</v-btn
>
</div>
Available fruits
Expand Down
12 changes: 7 additions & 5 deletions docs/installation.rst
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,16 @@ Using conda
Jupyter Lab
-----------

If you're using only the classic notebook, you're done. If you're using Jupyter Lab, the extension has to be installed
in Jupyter Lab:
If you're using the classic notebook or JupyterLab 3 and later, you're done after installing the Python package.
The JupyterLab extension is included in the ``ipyvuetify`` package.

For JupyterLab 1 and 2, install the JupyterLab extension separately:

.. code-block:: bash

$ jupyter labextension install jupyter-vuetify

.. note::
ipyvuetify depends on ipywidgets being installed in Jupyter Lab, see the `ipywidgets documentation
<https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-the-jupyterlab-extension>`_ on how to do
that.
ipyvuetify depends on ipywidgets being available in JupyterLab. If widgets do not display, see the
`ipywidgets installation documentation
<https://ipywidgets.readthedocs.io/en/stable/user_install.html#installing-in-jupyterlab-3-x>`_.
6 changes: 3 additions & 3 deletions docs/introduction.rst
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
Introduction
============

Ipyvuetify is a widget library for making modern looking GUI's in Jupyter notebooks (classic and lab) and dashboards
Ipyvuetify is a widget library for making modern-looking GUIs in Jupyter notebooks (classic and lab) and dashboards
(`Voilà <https://voila.readthedocs.io/en/stable/using.html>`_). It's based on the `Google material design philosophy
<https://material.io/design/introduction>`_ best known from the Android user interface.

A large set of widgets is provided with many widgets having multiple variants. a few of which are displayed below.
A large set of widgets is provided, with many widgets having multiple variants. A few of them are displayed below.

.. TODO: fix CSS collisions with rtd_theme

Expand All @@ -20,7 +20,7 @@ the standard widget library of Jupyter, ipyvuetify has a lot more widgets which
composable at the expense of a bit more verbosity in the source code.

Ipyvuetify uses the machinery of `ipywidgets <https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Basics.html>`_
as a base, but has different conventions for the API. This is mainly due to the fact the Python API is generated from
as a base, but has different conventions for the API. This is mainly because the Python API is generated from
the JavaScript library it is based on: `Vuetify <https://v2.vuetifyjs.com/>`_. This exposes the full power of Vuetify and
allows us to rely on the extensive documentation and examples of it. Generating code and relying on documentation from
the underlying library allowed us to expose a lot of widgets to Jupyter in a relatively short amount of time.
Expand Down
6 changes: 3 additions & 3 deletions docs/template_usage.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ First template
--------------

When building larger UI's it may be convenient to write composite widgets using
the Vue template syntax. Lets start with a basic example:
the Vue template syntax. Let's start with a basic example:

.. jupyter-execute::

Expand Down Expand Up @@ -87,7 +87,7 @@ Template in vue files

Although a powerful feature, programming Vue templates in a string is quite
cumbersome, since you lose syntax highlighting and other advanced editor
features. Instead, we can put out Vue template into a ``.vue`` file, and point
features. Instead, we can put our Vue template into a ``.vue`` file, and point
our VuetifyTemplate to it.


Expand Down Expand Up @@ -150,7 +150,7 @@ A demonstration in a screen capture:


.. note::
For this feature we require the watchdog packages. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"``
For this feature we require the watchdog package. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"``

Embed ipywidgets
----------------
Expand Down
38 changes: 19 additions & 19 deletions docs/usage.rst
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ Attributes can be changed at a later time by:
'Banana')`, are not detected by ipywidgets.

What widgets are available and how they look can be found in the
`Vuetify documentation <https://v2.vuetifyjs.com/components/selects/>`_. Browse the side bar on the left hand side and
select a widget, then click <> on the right hand side on an example to see the source code for it. The HTML code may
`Vuetify documentation <https://v2.vuetifyjs.com/components/selects/>`_. Browse the sidebar on the left-hand side and
select a widget, then click <> on the right-hand side on an example to see the source code for it. The HTML code may
seem unfamiliar at first, but this documentation will guide you through it. For starters to translate the Vuetify widget
names, which are starting with :code:`v-`, to ipyvuetify, remove the :code:`v-` prefix and CamelCase the remaining
name. E.g :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`.
name. For example, :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`.

Equivalent Vuetify syntax of the example above:

Expand Down Expand Up @@ -78,7 +78,7 @@ ipyvuetify:

v.Select(clearable=True, label='Fruits', items=['Apple', 'Pear', 'Cherry'], value='Apple')

Some attribute have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and
Some attributes have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and
:code:`style` and must be suffixed with an underscore. For example :code:`style` becomes :code:`style_`

Vuetify:
Expand All @@ -101,7 +101,7 @@ see an example of this. To look at how that variable is initialized you select t
If it's an expression it's mostly used to set a List or a Dict, as is done with :code:`items` in the examples above.
This can be the same in ipyvuetify.

for non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait.
For non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait.

Vuetify:

Expand Down Expand Up @@ -256,7 +256,7 @@ All `HTML events <https://www.w3schools.com/tags/ref_eventattributes.asp>`_ can
omitted.

Widgets can have custom events, to find out which, the `Vuetify API explorer
<https://v2.vuetifyjs.com/components/api-explorer/>`_ can be used. Search for a component and on the left-hand side of list
<https://v2.vuetifyjs.com/components/api-explorer/>`_ can be used. Search for a component and on the left-hand side of the list
of attributes you will find a tab for the events.

In Vuetify events are defined as attributes with an :code:`@` prefix. The equivalent Vuetify syntax of the example above
Expand Down Expand Up @@ -341,7 +341,7 @@ And colors:
ClassList attribute
^^^^^^^^^^^^^^^^^^^

The :code:`class` attribute of a Vuetify DOM elements give access to the built-in styles of the lib. See the `vuetify site <https://v2.vuetifyjs.com/en/styles/colors/>`__ to know more about available styling class. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property <https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>`__. It embeds the following methods:
The :code:`class` attribute of Vuetify DOM elements gives access to the built-in styles of the library. See the `Vuetify site <https://v2.vuetifyjs.com/en/styles/colors/>`__ to learn more about available styling classes. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property <https://developer.mozilla.org/en-US/docs/Web/API/Element/classList>`__. It embeds the following methods:

- :code:`add(*args)`: add class elements to the class\_ trait of the widget

Expand Down Expand Up @@ -378,7 +378,7 @@ The :code:`class` attribute of a Vuetify DOM elements give access to the built-i
Visibility
^^^^^^^^^^

ipyvuetify widgets visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`.
ipyvuetify widget visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`.
Using :code:`hide` will add the :code:`d-none` class to the widget and :code:`show` will remove it, hiding and showing the widget to the end user without removing it from the notebook.

.. jupyter-execute::
Expand Down Expand Up @@ -505,11 +505,11 @@ translation from Vuetify examples to ipyvuetify.

- Component names convert to CamelCase and the v- prefix is stripped

+------------+------------------------+
| Vuetify | ``<v-list-tile .../>`` |
+------------+------------------------+
| ipyvuetify | ``ListTitle(...)`` |
+------------+------------------------+
+------------+------------------------------+
| Vuetify | ``<v-list-item-title .../>`` |
+------------+------------------------------+
| ipyvuetify | ``ListItemTitle(...)`` |
+------------+------------------------------+

- Attributes

Expand All @@ -523,11 +523,11 @@ translation from Vuetify examples to ipyvuetify.

- must have a value

+------------+------------------------+
| Vuetify | ``<v-btn round ...`` |
+------------+------------------------+
| ipyvuetify | ``Btn(round=True ...`` |
+------------+------------------------+
+------------+--------------------------+
| Vuetify | ``<v-btn rounded ...`` |
+------------+--------------------------+
| ipyvuetify | ``Btn(rounded=True ...`` |
+------------+--------------------------+

- with naming conflicts, ``style``, ``class``, ``open`` and ``for``, are suffixed with an ``_``

Expand Down Expand Up @@ -565,7 +565,7 @@ translation from Vuetify examples to ipyvuetify.
| | ``button.on_event('click', some_method)`` |
+------------+--------------------------------------------+

- Regular HTML tags can made with the Html widget
- Regular HTML tags can be made with the Html widget

+------------+-------------------------------------+
| Vuetify | ``<div>...</div>`` |
Expand Down
1 change: 0 additions & 1 deletion pyproject.toml
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ doc = [
"ipykernel",
"pydata-sphinx-theme",
"sphinx-design",
"sphinx_rtd_theme",
]

[tool.setuptools]
Expand Down
Loading