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;
/**
* Used to pass attributes to the list's DOM element.
* Used to pass attributes to the content's DOM element.
*/
content?: TabListPassThroughOptionType;
/**
* Used to pass attributes to the tablist's DOM element.
*/
tabList?: TabListPassThroughOptionType;
/**
* Used to pass attributes to the inkbar's DOM element.
*/
inkbar?: TabListPassThroughOptionType;
activeBar?: TabListPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

View File

@ -14,9 +14,9 @@
<component :is="templates.previcon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('prevIcon')" />
</button>
<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>
<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>
<button
@ -36,7 +36,7 @@
</template>
<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 ChevronRightIcon from '@primevue/icons/chevronright';
import BaseTabList from './BaseTabList.vue';

View File

@ -21,11 +21,11 @@ export enum TabListClasses {
/**
* 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
*/

View File

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