-
- Primary
-
+
+
+
+ Primary
+
-
- Surface
-
+
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index bfceb22..bbee57e 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,19 +1,8 @@
-
+
+ Surface
+
-
- Presets
-
+ Presets
+
+
+ Menu Mode
+
- ![Logo]()
- by
- PrimeVue
+ SAKAI by
+ PrimeVue
-
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 4e46dda..25d3f86 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -19,8 +19,6 @@ watch(isSidebarActive, (newVal) => {
const containerClass = computed(() => {
return {
- 'layout-theme-light': !layoutConfig.darkTheme,
- 'layout-theme-dark': layoutConfig.darkTheme,
'layout-overlay': layoutConfig.menuMode === 'overlay',
'layout-static': layoutConfig.menuMode === 'static',
'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
@@ -55,9 +53,7 @@ const isOutsideClicked = (event) => {
-
+
+
diff --git a/src/layout/composables/layout.js b/src/layout/composables/layout.js
index 5d4ed79..49ef73b 100644
--- a/src/layout/composables/layout.js
+++ b/src/layout/composables/layout.js
@@ -35,6 +35,10 @@ export function useLayout() {
layoutConfig.activeMenuItem = item.value || item;
};
+ const setMenuMode = (mode) => {
+ layoutConfig.menuMode = mode;
+ };
+
const toggleDarkMode = () => {
if (!document.startViewTransition) {
executeDarkModeToggle();
@@ -74,5 +78,7 @@ export function useLayout() {
const getPrimary = computed(() => layoutConfig.primary);
- return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu };
+ const getSurface = computed(() => layoutConfig.surface);
+
+ return { layoutConfig: readonly(layoutConfig), layoutState: readonly(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, getSurface, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset, resetMenu, setMenuMode };
}
diff --git a/src/main.js b/src/main.js
index 8f9d627..625e05b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,10 @@ import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
-import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
-import ToastService from 'primevue/toastservice';
+import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
-
-import BlockViewer from '@/components/BlockViewer.vue';
+import ToastService from 'primevue/toastservice';
import '@/assets/styles.scss';
import '@/assets/tailwind.css';
@@ -26,6 +24,4 @@ app.use(PrimeVue, {
app.use(ToastService);
app.use(ConfirmationService);
-app.component('BlockViewer', BlockViewer);
-
app.mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index 2ef452c..d3fdabd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,28 +59,6 @@ const router = createRouter({
name: 'media',
component: () => import('@/views/uikit/MediaDoc.vue')
},
- {
- path: '/uikit/menu',
- component: () => import('@/views/uikit/MenuDoc.vue'),
- children: [
- {
- path: '/uikit/menu',
- component: () => import('@/views/uikit/menu/PersonalDemo.vue')
- },
- {
- path: '/uikit/menu/seat',
- component: () => import('@/views/uikit/menu/SeatDemo.vue')
- },
- {
- path: '/uikit/menu/payment',
- component: () => import('@/views/uikit/menu/PaymentDemo.vue')
- },
- {
- path: '/uikit/menu/confirmation',
- component: () => import('@/views/uikit/menu/ConfirmationDemo.vue')
- }
- ]
- },
{
path: '/uikit/message',
name: 'message',
@@ -91,6 +69,11 @@ const router = createRouter({
name: 'file',
component: () => import('@/views/uikit/FileDoc.vue')
},
+ {
+ path: '/uikit/menu',
+ name: 'menu',
+ component: () => import('@/views/uikit/MenuDoc.vue')
+ },
{
path: '/uikit/charts',
name: 'charts',
@@ -102,19 +85,9 @@ const router = createRouter({
component: () => import('@/views/uikit/MiscDoc.vue')
},
{
- path: '/blocks',
- name: 'blocks',
- component: () => import('@/views/utilities/Blocks.vue')
- },
- {
- path: '/utilities/icons',
- name: 'icons',
- component: () => import('@/views/utilities/Icons.vue')
- },
- {
- path: '/pages/timeline',
+ path: '/uikit/timeline',
name: 'timeline',
- component: () => import('@/views/pages/TimelineDoc.vue')
+ component: () => import('@/views/uikit/TimelineDoc.vue')
},
{
path: '/pages/empty',
@@ -129,7 +102,7 @@ const router = createRouter({
{
path: '/documentation',
name: 'documentation',
- component: () => import('@/views/utilities/Documentation.vue')
+ component: () => import('@/views/pages/Documentation.vue')
}
]
},
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 6e4e3c9..949eab3 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -3,7 +3,7 @@ import { useLayout } from '@/layout/composables/layout';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref, watch } from 'vue';
-const { getPrimary, isDarkTheme } = useLayout();
+const { getPrimary, getSurface, isDarkTheme } = useLayout();
const products = ref(null);
const chartData = ref(null);
@@ -99,7 +99,7 @@ watch(isDarkTheme, () => {
chartOptions.value = setChartOptions();
});
-watch(getPrimary, () => {
+watch([getPrimary, getSurface], () => {
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
@@ -191,8 +191,8 @@ watch(getPrimary, () => {
-
-
Best Selling Products
+
+
Best Selling Products
@@ -281,7 +281,7 @@ watch(getPrimary, () => {
-
Notifications
+ Notifications
@@ -292,7 +292,7 @@ watch(getPrimary, () => {
-
- +Richard Jones @@ -301,7 +301,7 @@ watch(getPrimary, () => {
-
- +Your request for withdrawal of 2500$ has been initiated.
@@ -311,7 +311,7 @@ watch(getPrimary, () => {
-
- +Keyser Wick @@ -320,7 +320,7 @@ watch(getPrimary, () => {
-
- +Jane Davis diff --git a/src/views/utilities/Documentation.vue b/src/views/pages/Documentation.vue similarity index 100% rename from src/views/utilities/Documentation.vue rename to src/views/pages/Documentation.vue diff --git a/src/views/pages/Empty.vue b/src/views/pages/Empty.vue index d0a1dbc..bce08f6 100644 --- a/src/views/pages/Empty.vue +++ b/src/views/pages/Empty.vue @@ -1,6 +1,6 @@-diff --git a/src/views/pages/NotFound.vue b/src/views/pages/NotFound.vue index 4ae26f8..48e112e 100644 --- a/src/views/pages/NotFound.vue +++ b/src/views/pages/NotFound.vue @@ -1,17 +1,33 @@ -
Empty Page
+Empty PageUse this page to start from scratch and place your custom content.
+-
- + +diff --git a/src/views/pages/TimelineDoc.vue b/src/views/pages/TimelineDoc.vue deleted file mode 100644 index 41b1286..0000000 --- a/src/views/pages/TimelineDoc.vue +++ /dev/null @@ -1,155 +0,0 @@ - - - -- 404 + 404Not Found
Requested resource is not available.- - + + Frequently Asked Questions @@ -19,8 +35,8 @@ - - + + Solution Center @@ -28,14 +44,15 @@ - - + + Permission Manager Accumsan in nisl nisi scelerisque +------Left Align
-- - {{ slotProps.item.status }} - - -----Right Align
-- - {{ slotProps.item.status }} - - -----Alternate Align
-- - {{ slotProps.item.status }} - - -----Opposite Content
-- - {{ slotProps.item.date }} - - - {{ slotProps.item.status }} - - ---Custom Timeline
-- - - - - - - -- - {{ slotProps.item.status }} - - - {{ slotProps.item.date }} - - - - --
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate - neque quas! -
- - --- - - diff --git a/src/views/pages/auth/Access.vue b/src/views/pages/auth/Access.vue index c15af7f..3bf01b2 100644 --- a/src/views/pages/auth/Access.vue +++ b/src/views/pages/auth/Access.vue @@ -3,19 +3,17 @@Horizontal
-Top Align
-- - {{ slotProps.item }} - - - -Bottom Align
-- - {{ slotProps.item }} - - - -Alternate Align
-- - - {{ slotProps.item }} - - --
-diff --git a/src/views/pages/auth/Error.vue b/src/views/pages/auth/Error.vue index 615d073..0c4bedc 100644 --- a/src/views/pages/auth/Error.vue +++ b/src/views/pages/auth/Error.vue @@ -3,19 +3,17 @@- ++Access Denied
- You do not have the necessary permisions. Please contact admins. + You do not have the necessary permisions. Please contact admins.
- -Go to Dashboard +-
-diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue index a665c95..283fb13 100644 --- a/src/views/pages/auth/Login.vue +++ b/src/views/pages/auth/Login.vue @@ -1,44 +1,53 @@- ++Error Occured
- Requested resource is not available. + Requested resource is not available.
- -Go to Dashboard +-diff --git a/src/views/uikit/ButtonDoc.vue b/src/views/uikit/ButtonDoc.vue index 0b9fc40..586b02b 100644 --- a/src/views/uikit/ButtonDoc.vue +++ b/src/views/uikit/ButtonDoc.vue @@ -28,10 +28,10 @@ const load = (index) => { --
- Welcome, Isabel!- Sign in to continue + +Welcome to PrimeLand!+ Sign in to continue+-Default
+Default@@ -39,7 +39,7 @@ const load = (index) => {-Severities
+Severities@@ -52,7 +52,7 @@ const load = (index) => {-Text
+Text@@ -65,7 +65,7 @@ const load = (index) => {-Outlined
+Outlined@@ -78,7 +78,7 @@ const load = (index) => {-Button Group
+Group@@ -88,7 +88,7 @@ const load = (index) => { -SplitButton
+SplitButton@@ -101,7 +101,7 @@ const load = (index) => { -Templating
+Templating-Icons
+Icons@@ -123,7 +123,7 @@ const load = (index) => {-Raised
+Raised@@ -136,7 +136,7 @@ const load = (index) => {-Rounded
+Rounded@@ -149,7 +149,7 @@ const load = (index) => {-Rounded Icons
+Rounded Icons@@ -161,7 +161,7 @@ const load = (index) => {-Rounded Text
+Rounded Text@@ -173,7 +173,7 @@ const load = (index) => {-Rounded Outlined
+Rounded Outlined@@ -185,7 +185,7 @@ const load = (index) => {-Loading
+Loadingdiff --git a/src/views/uikit/ChartDoc.vue b/src/views/uikit/ChartDoc.vue index 6a829ed..fb9ac14 100644 --- a/src/views/uikit/ChartDoc.vue +++ b/src/views/uikit/ChartDoc.vue @@ -242,40 +242,40 @@ watch( -+ -Linear Chart
+Linear-Bar Chart
+Bar-Pie Chart
+Pie-Doughnut Chart
+Doughnut-Polar Area Chart
+Polar Areadiff --git a/src/views/uikit/FileDoc.vue b/src/views/uikit/FileDoc.vue index 5fa0d22..ff8a707 100644 --- a/src/views/uikit/FileDoc.vue +++ b/src/views/uikit/FileDoc.vue @@ -1,6 +1,6 @@ --Radar Chart
+Radar-+++-+Advanced
+Advanced-diff --git a/src/views/uikit/FormLayout.vue b/src/views/uikit/FormLayout.vue index 10be513..07db5e5 100644 --- a/src/views/uikit/FormLayout.vue +++ b/src/views/uikit/FormLayout.vue @@ -12,10 +12,10 @@ const dropdownItem = ref(null);Basic
+Basic- + - +-Vertical
+Vertical@@ -31,7 +31,7 @@ const dropdownItem = ref(null); -Vertical Grid
+Vertical Grid@@ -46,7 +46,7 @@ const dropdownItem = ref(null);-Horizontal
+Horizontal@@ -62,7 +62,7 @@ const dropdownItem = ref(null);-Inline
+Inline@@ -76,7 +76,7 @@ const dropdownItem = ref(null);--Help Text
+Help Text@@ -86,9 +86,9 @@ const dropdownItem = ref(null); +-Advanced
+Advanceddiff --git a/src/views/uikit/InputDoc.vue b/src/views/uikit/InputDoc.vue index f98a420..cf09caa 100644 --- a/src/views/uikit/InputDoc.vue +++ b/src/views/uikit/InputDoc.vue @@ -9,7 +9,6 @@ const selectedAutoValue = ref(null); const autoFilteredValue = ref([]); const calendarValue = ref(null); const inputNumberValue = ref(null); -const chipsValue = ref(null); const sliderValue = ref(50); const ratingValue = ref(null); const colorValue = ref('#1976D2'); @@ -47,10 +46,8 @@ const multiselectValues = ref([ const multiselectValue = ref(null); const toggleValue = ref(false); -const selectButtonValue1 = ref(null); -const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]); -const selectButtonValue2 = ref(null); -const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]); +const selectButtonValue = ref(null); +const selectButtonValues = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]); const knobValue = ref(50); const inputGroupValue = ref(false); const treeSelectNodes = ref(null); @@ -75,17 +72,17 @@ const searchCountry = (event) => { -+ -InputText+InputText-Icons
+Icons@@ -95,51 +92,48 @@ const searchCountry = (event) => { Float Label
+Float LabelTextarea
+Textarea-AutoComplete
-+ AutoComplete+- DatePicker
+DatePicker- Spinner
+InputNumber- - Chips
--Slider
+Slider--Rating
+Rating-ColorPicker
+ColorPickerKnob
+Knob-RadioButton
+RadioButton-@@ -155,7 +149,7 @@ const searchCountry = (event) => { Checkbox
+Checkbox-@@ -171,18 +165,18 @@ const searchCountry = (event) => { Input Switch
+ToggleSwitch--Listbox
+Listbox- Select
+Select-MultiSelect
+MultiSelect@@ -201,26 +195,23 @@ const searchCountry = (event) => { -TreeSelect
+TreeSelect-ToggleButton
+ToggleButton- SelectButton
-- - SelectButton - Multiple
-+ SelectButton++ -Input Groups
+InputGroupdiff --git a/src/views/uikit/ListDoc.vue b/src/views/uikit/ListDoc.vue index 21c7bd5..7f9b705 100644 --- a/src/views/uikit/ListDoc.vue +++ b/src/views/uikit/ListDoc.vue @@ -1,6 +1,6 @@ - +-DataView
+DataView@@ -68,7 +68,7 @@ const getSeverity = (product) => {-+@@ -109,7 +109,7 @@ const getSeverity = (product) => { -+@@ -153,10 +153,10 @@ const getSeverity = (product) => {-+-diff --git a/src/views/uikit/MediaDoc.vue b/src/views/uikit/MediaDoc.vue index 761348b..c30e897 100644 --- a/src/views/uikit/MediaDoc.vue +++ b/src/views/uikit/MediaDoc.vue @@ -1,7 +1,7 @@ -PickList
+PickList{{ option.name }} @@ -167,14 +167,12 @@ const getSeverity = (product) => { -OrderList
--+- - {{ option.name }} - - -OrderList++ + {{ option.name }} + + +- ---Toast
+Toast---Messages
-- - - - --- -{{ msg.content }} ---Inline
+InlineUsername is required @@ -77,12 +59,19 @@ const showError = () => {-diff --git a/src/views/uikit/MiscDoc.vue b/src/views/uikit/MiscDoc.vue index 06ea295..7b4f143 100644 --- a/src/views/uikit/MiscDoc.vue +++ b/src/views/uikit/MiscDoc.vue @@ -1,5 +1,5 @@ -Help Text
-- -- Enter your username to reset your password. + Message+++ +Success Message +Info Message +Warn Message +Error Message +Secondary Message +Contrast Message + {{ msg.content }} ++-Dialog
+Dialog- +-Popover
+Popover- -- - - +
- @@ -119,16 +114,16 @@ const confirm = (event) => { -Tooltip
+Tooltip- + -Drawer
+DrawerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo @@ -164,21 +159,21 @@ const confirm = (event) => {
-ConfirmPopup
+ConfirmPopup-diff --git a/src/views/uikit/PanelsDoc.vue b/src/views/uikit/PanelsDoc.vue index 816f03d..c8ba892 100644 --- a/src/views/uikit/PanelsDoc.vue +++ b/src/views/uikit/PanelsDoc.vue @@ -32,9 +32,9 @@ const toggle = () => { -Confirmation
+ConfirmDialog+--Toolbar
+Toolbar@@ -55,10 +55,10 @@ const toggle = () => { +-Accordion
+AccordionHeader I @@ -93,7 +93,7 @@ const toggle = () => {-Tabs
+TabsHeader I @@ -128,7 +128,7 @@ const toggle = () => {--Panel
+PanelLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo @@ -138,7 +138,7 @@ const toggle = () => {
-Fieldset
+Fieldset-Divider
++Divider@@ -185,8 +185,8 @@ const toggle = () => {-OR -OR +OR +OR @@ -195,8 +195,7 @@ const toggle = () => {-Splitter
- +SplitterPanel 1diff --git a/src/views/uikit/TableDoc.vue b/src/views/uikit/TableDoc.vue index 4546f82..372fa66 100644 --- a/src/views/uikit/TableDoc.vue +++ b/src/views/uikit/TableDoc.vue @@ -1,8 +1,8 @@ + + +++ + + diff --git a/src/views/uikit/TreeDoc.vue b/src/views/uikit/TreeDoc.vue index 11b30ad..d450b63 100644 --- a/src/views/uikit/TreeDoc.vue +++ b/src/views/uikit/TreeDoc.vue @@ -1,6 +1,6 @@ - - -++++Left Align++ + {{ slotProps.item.status }} + + +++++Right Align++ + {{ slotProps.item.status }} + + +++++Alternate Align++ + {{ slotProps.item.status }} + + +++++Opposite Content++ + {{ slotProps.item.date }} + + + {{ slotProps.item.status }} + + +++++Templating++ + + + + + + ++ + {{ slotProps.item.status }} + + + {{ slotProps.item.date }} + + + + ++
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, + cupiditate neque quas! +
+ + +++++Horizontal+Top Align++ + {{ slotProps.item }} + + + +Bottom Align++ + {{ slotProps.item }} + + + +Alternate Align++ + + {{ slotProps.item }} + + +-- diff --git a/src/views/utilities/Icons.vue b/src/views/utilities/Icons.vue deleted file mode 100644 index ca28faa..0000000 --- a/src/views/utilities/Icons.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - -- - ------ Create the screens your - -your visitors deserve to see-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- - - ---
- - - ---- One Product, - Many Solutions --Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.---- - - --Built for Developers- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -- - - --End-to-End Encryption- Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis. -- - - --Easy to Use- Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper. -- - - --Fast & Global Support- Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. -- - - --Open Source- Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. -- - - --Trusted Securitty- Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend. -- - ---Pricing Plans-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.- ----- -----Basic-Plan description-
-- $9 - per month --
--
-
- - - Arcu vitae elementum - -
- - - Dui faucibus in ornare - -
- - - Morbi tincidunt augue - -
- --- -----Premium-Plan description-
-- $29 - per month --
--
-
- - - Arcu vitae elementum - -
- - - Dui faucibus in ornare - -
- - - Morbi tincidunt augue - -
- - - Duis ultricies lacus sed - -
- -------Enterprise-Plan description-
-- $49 - per month --
--
-
- - - Arcu vitae elementum - -
- - - Dui faucibus in ornare - -
- - - Morbi tincidunt augue - -
- - - Duis ultricies lacus sed - -
- - - Imperdiet proin - -
- - - Nisi scelerisque - -
- -- - -----POWERED BY DISCORD-Join Our Design Community-Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.- -- - ---🔥 Hot Deals!-- Libero voluptatum atque exercitationem praesentium provident odit. -- - Learn More - - - - -- - ----
-
- - Application - -
- - - -
- - Analytics - -
----Customers---- - 332 Active Users --- - 9402 Sessions --- - 2.32m Avg. Duration --- - --- - ----------- 24 new - since last visit -- Orders --152-- -------- %52+ - since last week -- Revenue --$2.100-- -------- 520 - newly registered -- Customers --28441-- -------- 85 - responded -- Comments --152 Unread-- --- - -- - - --- - ---Movie Information-Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.--
-
-
- Title-Heat-- --
-
-
- Genre---
- - - - --
- -
- Director-Michael Mann-- --
-
-
- Actors-Robert De Niro, Al Pacino-- --
-
-
- Plot-- A group of professional bank robbers start to feel the heat from police when they unknowingly leave a clue at their latest heist. --- --
-
- ---Card Title-Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.- --- - -Icons
-- PrimeVue components internally use PrimeIcons library, the official icons suite from - PrimeTek. -
- -Download
-PrimeIcons is available at npm, run the following command to download it to your project.
- -
- -npm install primeicons --saveGetting Started
-PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element like i or span
- -
- - - - -<i class="pi pi-check"></i> -<i class="pi pi-times"></i>Size
-Size of the icons can easily be changed using font-size property.
- -
- - - -<i class="pi pi-check"></i>
- - - -<i class="pi pi-check" style="font-size: 2rem"></i>Spinning Animation
-Special pi-spin class applies continuous rotation to an icon.
-
- - - -<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>List of Icons
-- Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker. -
- -- - --- --pi-{{ icon.properties.name }}-
-