Fixed visual issues at templating menu demos
parent
6f648faa54
commit
78ce1c62d5
|
@ -29,7 +29,7 @@
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -105,7 +105,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -140,7 +140,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -230,7 +230,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -111,7 +111,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -144,7 +144,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -243,7 +243,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<span :class="[item.icon, 'text-primary']" />
|
||||
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</PanelMenu>
|
||||
|
@ -92,7 +92,7 @@ export default {
|
|||
<span :class="[item.icon, 'text-primary']" />
|
||||
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</PanelMenu>
|
||||
|
@ -106,7 +106,7 @@ export default {
|
|||
<span :class="[item.icon, 'text-primary']" />
|
||||
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</PanelMenu>
|
||||
|
@ -194,7 +194,7 @@ export default {
|
|||
<span :class="[item.icon, 'text-primary']" />
|
||||
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</PanelMenu>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -109,7 +109,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -124,7 +124,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
@ -229,7 +229,7 @@ export default {
|
|||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue