Quiz 7 Vuetify Dialog

7. Quiz 7 Vuetify Dialog#

7.1. Task#

In the provided Random User App, enhance the functionality by adding a detail view action. This action should trigger a dialog that displays comprehensive information about the user when their identity icon in the data table is clicked. The details to be displayed should include:

  • Title of the Card: Display the user’s full name.

  • Subtitle: Show the user’s email address.

  • Card Text Content: Present other relevant information of the user. Including a single picture (large size) of the user will suffice.

  • Close Action: Incorporate a close (X) icon button within the dialog; clicking this button should close the dialog.

7.2. Expected Display#

A sample implementation might resemble the layout and style shown in the reference image below:

../_images/randomUser.jpg

7.3. Reference#

  • For instructions on creating a card component in Vuetify, consult the Vuetify Cards documentation. This resource provides examples and explanations on how to build and customize card components effectively.

  • To access and utilize various icons, including the email and close icon for the dialog, refer to Material Design Icons. This library offers a wide range of icons suitable for enhancing the user interface of your application.

7.4. Testing#

Test your solution in the provided Random User App and verify that the dialog behaves as expected.