Skip to content

Commit

Permalink
docs: Update links to v2.vuetifyjs.com
Browse files Browse the repository at this point in the history
See: #313
  • Loading branch information
mariobuikhuizen committed Apr 24, 2024
1 parent 6ba8d8d commit f4cf06c
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 14 deletions.
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -8,7 +8,7 @@
[![Black badge](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
[![conventional commit](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

Jupyter widgets based on [vuetify UI components](https://vuetifyjs.com/) which implement Google's
Jupyter widgets based on [vuetify UI components](https://v2.vuetifyjs.com/) which implement Google's
[Material Design Spec](https://material.io/) with the [Vue.js framework](https://vuejs.org/).

A small selection of widgets:
Expand Down Expand Up @@ -43,7 +43,7 @@ https://ipyvuetify.readthedocs.io/

For examples see the [example notebook](examples/Examples.ipynb).

The [Vuetify documentation](https://vuetifyjs.com/components/buttons#buttons) can be used to find all available
The [Vuetify documentation](https://v2.vuetifyjs.com/components/buttons#buttons) can be used to find all available
components and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js
and Vuetify template syntax, but there are some differences:

Expand Down
8 changes: 4 additions & 4 deletions docs/advanced_usage.rst
Expand Up @@ -6,8 +6,8 @@ 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://vuetifyjs.com/components/api-explorer/>`_ or for this example use the `direct link
<https://vuetifyjs.com/en/components/selects/#api>`_. On the left-hand side of list of attributes you will find a tab
`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
'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 @@ -102,7 +102,7 @@ Responsive Layout
-----------------

When making dashbords with Voilà you can change the layout depending on the users screen size. This is done with a `grid
system <https://vuetifyjs.com/en/components/grids/>`_. For example on a laptop (breakpoint md) you could fit two
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 All @@ -125,7 +125,7 @@ On a phone as:
.. image:: images/responsive-mobile.png
:width: 263

In the `display section <https://vuetifyjs.com/en/styles/display/>`_ you will find CSS helper classes to do more
In the `display section <https://v2.vuetifyjs.com/en/styles/display/>`_ you will find CSS helper classes to do more
customizations based on screen size.

Event modifiers
Expand Down
4 changes: 2 additions & 2 deletions docs/introduction.rst
Expand Up @@ -21,13 +21,13 @@ 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
the JavaScript library it is based on: `Vuetify <https://vuetifyjs.com/>`_. This exposes the full power of Vuetify and
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.

In :doc:`usage` all concepts and how they differ from ipywidgets will be explained and supported by examples.

To explore which widgets are available and how to use them we defer to the
`Vuetify documentation <https://vuetifyjs.com/nl-NL/components/buttons/>`_. You can browse examples on the left-hand
`Vuetify documentation <https://v2.vuetifyjs.com/nl-NL/components/buttons/>`_. You can browse examples on the left-hand
side and see the source code by clicking on '< >' on the top right-hand side of the example. By reading :doc:`usage` you
will be able to translate the examples to ipyvuetify.
12 changes: 6 additions & 6 deletions docs/usage.rst
Expand Up @@ -30,7 +30,7 @@ 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://vuetifyjs.com/components/selects/>`_. Browse the side bar on the left hand side and
`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
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
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://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 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 @@ -310,7 +310,7 @@ properties can be set by separating them with a semicolon :code:`;`.
v.Select(label='Fruit', style_='width: 75px; opacity: 0.7')

With the :code:`class_` attribute predefined Vuetify styles can be set. Predefined styles of note are
`spacing <https://vuetifyjs.com/styles/spacing/>`__ and `colors <https://vuetifyjs.com/styles/colors/>`__. More can be
`spacing <https://v2.vuetifyjs.com/styles/spacing/>`__ and `colors <https://v2.vuetifyjs.com/styles/colors/>`__. More can be
found in the section 'Styles and animations' of the Vuetify documentation. Multiple classes can be applied by separating
them with a space.

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://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 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:

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

Expand Down Expand Up @@ -416,7 +416,7 @@ In ipywidgets you would layout a grid of widgets with HBox and VBox.
])

This can be done in ipyvuetify with the help of some classes described in
`flex helpers <https://vuetifyjs.com/styles/flex/>`_.
`flex helpers <https://v2.vuetifyjs.com/styles/flex/>`_.

.. jupyter-execute::

Expand Down Expand Up @@ -466,7 +466,7 @@ To customize the themes:
v.theme.themes.dark.primary = '#a71c1c'
Also, the `pre-defined material colors <https://vuetifyjs.com/en/styles/colors/#sass-color-pack>`_ are supported:
Also, the `pre-defined material colors <https://v2.vuetifyjs.com/en/styles/colors/#sass-color-pack>`_ are supported:

.. code-block:: python
Expand Down

0 comments on commit f4cf06c

Please sign in to comment.