From f4cf06cf0ccd617354eccf783a387b3dcf6195b6 Mon Sep 17 00:00:00 2001 From: Mario Buikhuizen Date: Wed, 24 Apr 2024 20:01:23 +0200 Subject: [PATCH] docs: Update links to v2.vuetifyjs.com See: #313 --- README.md | 4 ++-- docs/advanced_usage.rst | 8 ++++---- docs/introduction.rst | 4 ++-- docs/usage.rst | 12 ++++++------ 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 01276e48..f2bf2c12 100755 --- a/README.md +++ b/README.md @@ -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: @@ -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: diff --git a/docs/advanced_usage.rst b/docs/advanced_usage.rst index 3dd594e2..890fcfa2 100644 --- a/docs/advanced_usage.rst +++ b/docs/advanced_usage.rst @@ -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 `_ or for this example use the `direct link -`_. On the left-hand side of list of attributes you will find a tab +`Vuetify API explorer `_ or for this example use the `direct link +`_. 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: @@ -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 `_. For example on a laptop (breakpoint md) you could fit two +system `_. 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: @@ -125,7 +125,7 @@ On a phone as: .. image:: images/responsive-mobile.png :width: 263 -In the `display section `_ you will find CSS helper classes to do more +In the `display section `_ you will find CSS helper classes to do more customizations based on screen size. Event modifiers diff --git a/docs/introduction.rst b/docs/introduction.rst index 8ce3263d..76702d20 100644 --- a/docs/introduction.rst +++ b/docs/introduction.rst @@ -21,13 +21,13 @@ composable at the expense of a bit more verbosity in the source code. Ipyvuetify uses the machinery of `ipywidgets `_ 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 `_. This exposes the full power of Vuetify and +the JavaScript library it is based on: `Vuetify `_. 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 `_. You can browse examples on the left-hand +`Vuetify documentation `_. 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. diff --git a/docs/usage.rst b/docs/usage.rst index 7a961746..793c0bc9 100644 --- a/docs/usage.rst +++ b/docs/usage.rst @@ -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 `_. Browse the side bar on the left hand side and +`Vuetify documentation `_. 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 @@ -256,7 +256,7 @@ All `HTML events `_ can omitted. Widgets can have custom events, to find out which, the `Vuetify API explorer -`_ can be used. Search for a component and on the left-hand side of list +`_ 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 @@ -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 `__ and `colors `__. More can be +`spacing `__ and `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. @@ -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 `__ 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 `__. 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 `__ 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 `__. It embeds the following methods: - :code:`add(*args)`: add class elements to the class\_ trait of the widget @@ -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 `_. +`flex helpers `_. .. jupyter-execute:: @@ -466,7 +466,7 @@ To customize the themes: v.theme.themes.dark.primary = '#a71c1c' -Also, the `pre-defined material colors `_ are supported: +Also, the `pre-defined material colors `_ are supported: .. code-block:: python