menubar: стилизация, сторисы#160
Conversation
# Conflicts: # src/plugins/prime/theme3.0/css.ts
Обрезается пример
|
| <script setup lang="ts"> | ||
| import { Badge } from 'primevue'; | ||
|
|
||
| defineProps({ |
There was a problem hiding this comment.
Я так понимаю этот компонент сделан просто как пример чтобы заюзать в сторизе
Но у нас же в фигме буквально отрисован ItemTemplate и я так понимаю это какой то стандартный кстом
Может его нормально типизировать, наверстать в соответсвии с представленным макетом и экспрортировать для использования? Вопрос к обсжудению, я не сильно настаиваю
There was a problem hiding this comment.
меню бар в обертку, с простоым прокидыванием всего
МенюБарИтем наверстываем и тоже экспортироваем
There was a problem hiding this comment.
Имеет смысл сразу вынести МенюАйтем для переиспользования в остальных местах, если оно ложится
После Айтем использовать как слот в базовом компоненте
|
|
||
| defineProps({ | ||
| item: { | ||
| type: Object, |
There was a problem hiding this comment.
непонятно что передавать, типизируй через тс
Вынесен переиспользуемый PBlockMenuItem с TS-типизацией для использования через #item слот в любых меню-компонентах. Создан PBlockMenubar по аналогии с PBlockTieredMenu. Удалён старый MenubarItem.vue из stories.
| </script> | ||
|
|
||
| <template> | ||
| <a v-bind="actionProps" class="p-menuitem-link"> |
There was a problem hiding this comment.
Давай чтобы стили не конфликтвоали с праймом не будем испрользовать их классы
можем через p-block например писать и конкретно тут уже описать стили для кастом компонента scoped стилями
| <Description /> | ||
|
|
||
| ```javascript | ||
| import { Menubar } from 'primevue'; |
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import { PBlockMenubar } from '@/primeBlocks'; |
There was a problem hiding this comment.
Импорт не из @/primeBlocks, а из кита
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import { PBlockMenubar, PBlockMenuItem } from '@/primeBlocks'; |
| <template v-if="$slots.end" #end> | ||
| <slot name="end" /> | ||
| </template> | ||
| <template v-if="$slots.item" #item="slotProps"> |
There was a problem hiding this comment.
по умолчанию пусть в слот передается новый PBlockMenuItem
| description?: string; | ||
| badge?: string; | ||
| }; | ||
| actionProps?: Record<string, unknown>; |
There was a problem hiding this comment.
я не понимаю что принимает actionProps, если это атрибуты с a тега, то их не надо передавать как пропс, они должны наследоваться от a
| </script> | ||
|
|
||
| <template> | ||
| <a v-bind="actionProps" class="p-menuitem-link"> |
There was a problem hiding this comment.
веротяно сразу надо заложить передачу не as пропса, чтобы рисовать не только ссылкой, а например передавать компонент сверху
There was a problem hiding this comment.
если мы реализуем как кастомный дочерний компонент, то есть ли смысл в этом цссе в целом?
…em, убран лишний CSS
| template: ` | ||
| <PBlockMenubar :model="items" v-bind="args"> | ||
| <template #item="{ item, props, hasSubmenu }"> | ||
| <PBlockMenuItem :item="item" v-bind="props.action" :has-submenu="hasSubmenu" /> |
There was a problem hiding this comment.
для чего тут описывается слот, если PBlockMenuItem должен рисоваться сразу под капотом?
…рится по умолчанию
| <slot name="item" v-bind="slotProps"> | ||
| <PBlockMenuItem | ||
| :item="slotProps.item" | ||
| :has-submenu="slotProps.hasSubmenu" |
There was a problem hiding this comment.
has-submenu кажется должен вычисляться по наличию items у основного элемента
| description?: string; | ||
| badge?: string; | ||
| }; | ||
| as?: string | Component; |
There was a problem hiding this comment.
вообще будто полностью надо заэкстендиться от MenuItem, чтоб не прокидывать пропсы объектом сюда
| </template> | ||
| <template #item="slotProps"> | ||
| <slot name="item" v-bind="slotProps"> | ||
| <PBlockMenuItem |
| color: ${dt('menubar.extend.extSubmenuLabel.color')}; | ||
| } | ||
|
|
||
| .p-menubar-mobile-button-icon { |
There was a problem hiding this comment.
какой-то интересный селектор, откуда он?
…con CSS, story для itemAs
There was a problem hiding this comment.
Покажи истории с разными слотами, кажется, что оно вместе не факт, что работает
…через design tokens
…ap, borderRadius, caption
…s, .p-menubar-item-active)
… а не на вложенный link
3 participants
No description provided.