Tablist PT name updates

pull/6082/head
tugcekucukoglu 2024-07-18 10:22:08 +03:00
parent be9029c1e8
commit 08a8e3070f
4 changed files with 14 additions and 10 deletions

View File

@ -62,13 +62,17 @@ export interface TabListPassThroughOptions {
*/ */
nextButton?: TabListPassThroughOptionType; nextButton?: TabListPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: TabListPassThroughOptionType; content?: TabListPassThroughOptionType;
/**
* Used to pass attributes to the tablist's DOM element.
*/
tabList?: TabListPassThroughOptionType;
/** /**
* Used to pass attributes to the inkbar's DOM element. * Used to pass attributes to the inkbar's DOM element.
*/ */
inkbar?: TabListPassThroughOptionType; activeBar?: TabListPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

View File

@ -14,9 +14,9 @@
<component :is="templates.previcon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('prevIcon')" /> <component :is="templates.previcon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('prevIcon')" />
</button> </button>
<div ref="content" :class="cx('content')" @scroll="onScroll" v-bind="ptm('content')"> <div ref="content" :class="cx('content')" @scroll="onScroll" v-bind="ptm('content')">
<div ref="tabs" :class="cx('tabs')" role="tablist" :aria-orientation="$pcTabs.orientation || 'horizontal'" v-bind="ptm('tabs')"> <div ref="tabs" :class="cx('tabList')" role="tablist" :aria-orientation="$pcTabs.orientation || 'horizontal'" v-bind="ptm('tabList')">
<slot></slot> <slot></slot>
<span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span> <span ref="inkbar" :class="cx('activeBar')" role="presentation" aria-hidden="true" v-bind="ptm('activeBar')"></span>
</div> </div>
</div> </div>
<button <button
@ -36,7 +36,7 @@
</template> </template>
<script> <script>
import { getWidth, findSingle, getHeight, getOuterHeight, getOuterWidth, getOffset } from '@primeuix/utils/dom'; import { findSingle, getHeight, getOffset, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
import BaseTabList from './BaseTabList.vue'; import BaseTabList from './BaseTabList.vue';

View File

@ -21,11 +21,11 @@ export enum TabListClasses {
/** /**
* Class name of the tabs element * Class name of the tabs element
*/ */
tabs = 'p-tablist-tab-list', tabList = 'p-tablist-tab-list',
/** /**
* Class name of the inkbar element * Class name of the activebar element
*/ */
inkbar = 'p-tablist-active-bar', activeBar = 'p-tablist-active-bar',
/** /**
* Class name of the previous button element * Class name of the previous button element
*/ */

View File

@ -8,8 +8,8 @@ const classes = {
'p-tablist-viewport': instance.$pcTabs.scrollable 'p-tablist-viewport': instance.$pcTabs.scrollable
} }
], ],
tabs: 'p-tablist-tab-list', tabList: 'p-tablist-tab-list',
inkbar: 'p-tablist-active-bar', activeBar: 'p-tablist-active-bar',
prevButton: 'p-tablist-prev-button p-tablist-nav-button', prevButton: 'p-tablist-prev-button p-tablist-nav-button',
nextButton: 'p-tablist-next-button p-tablist-nav-button' nextButton: 'p-tablist-next-button p-tablist-nav-button'
}; };