diff --git a/demo/vue.html b/demo/vue.html index 272df33..60b4738 100644 --- a/demo/vue.html +++ b/demo/vue.html @@ -67,7 +67,8 @@ GnList, GnActionList, GnDefinitionList, GnChip, GnChipGroup, GnSearchField, GnPagination, GnToolbar, - GnPageHeader, GnToastProvider, useToast + GnPageHeader, GnToastProvider, useToast, + GnAccordion, GnNavigationShell, GnInputGroup } from "gnexus-ui-kit/vue"; createApp({ @@ -83,7 +84,8 @@ GnList, GnActionList, GnDefinitionList, GnChip, GnChipGroup, GnSearchField, GnPagination, GnToolbar, - GnPageHeader, GnToastProvider + GnPageHeader, GnToastProvider, + GnAccordion, GnNavigationShell, GnInputGroup }, setup() { const toast = useToast(); @@ -131,10 +133,10 @@ { label: "Emily", value: "emily" } ]; const steps = [ - { label: "Created", status: "complete" }, - { label: "Review", status: "current" }, - { label: "Deploy" }, - { label: "Done" } + { title: "Created", status: "complete" }, + { title: "Review", status: "current" }, + { title: "Deploy" }, + { title: "Done" } ]; const stages = [ { label: "Created", status: "complete" }, @@ -161,6 +163,11 @@ { label: "Projects", icon: "ph-folder", href: "#" }, { label: "Settings", icon: "ph-gear", href: "#" } ]; + const accordionItems = [ + { id: "overview", label: "Overview", icon: "ph-info", content: "Overview panel content." }, + { id: "details", label: "Details", icon: "ph-list-dashes", content: "Details panel content." }, + { id: "settings", label: "Settings", icon: "ph-gear", content: "Settings panel content." } + ]; const listItems = [ { label: "First item", meta: "Meta text" }, { label: "Second item", meta: "More info" } @@ -171,8 +178,8 @@ { label: "Delete", icon: "ph-trash", danger: true } ]; const definitionItems = [ - { term: "Term A", definition: "Definition for A" }, - { term: "Term B", definition: "Definition for B" } + { term: "Term A", description: "Definition for A" }, + { term: "Term B", description: "Definition for B" } ]; function save() { @@ -189,7 +196,7 @@ modalOpen, drawerOpen, confirmOpen, name, status, tab, checked, switched, mode, rollout, assignee, files, searchQuery, currentPage, statusOptions, tabs, tableColumns, tableRows, modes, people, steps, stages, - details, activity, timeline, navItems, listItems, actionListItems, definitionItems, + details, activity, timeline, navItems, listItems, actionListItems, definitionItems, accordionItems, save, confirmAction, toast }; }, @@ -261,6 +268,21 @@
+

Accordion

+ +
+ +
+

Input Group

+ + + + +
+ +

Tabs