相关文章推荐
潇洒的茶壶  ·  全局配置| 文档·  1 年前    · 
潇洒的茶壶  ·  微信小程序-获取设备信息，状态栏/导航栏/内 ...·  1 年前    · 
潇洒的茶壶  ·  微信小程序自定义Tabbar | Taro 文档·  1 年前    · 
潇洒的茶壶  ·  小程序开发实战案例之三| ...·  1 年前    · 
潇洒的茶壶  ·  微信小程序底部实现自定义动态Tabbar ...·  1 年前    · 
小百科  ›  Element: <oj-tab-bar>
Tab Bar element bar oj tab
安静的春卷
2 年前

Description: JET Tab Bar enhances a HTML list element into a themable, WAI-ARIA compliant, mobile friendly component with advance interactive features.

The JET Tab Bar gets its data in two different ways. The first way is from a DataProvider/TableDataSource. There are several types of DataProvider/TableDataSource that are available out of the box:

  • oj.ArrayDataProvider
  • oj.CollectionTableDataSource

    • oj.ArrayDataProvider - Use this when the underlying data is an array object or an observableArray. In the observableArray case, Tab Bar will automatically react when items are added or removed from the array. See the documentation for oj.ArrayDataProvider for more details on the available options.

    oj.CollectionTableDataSource - Use this when oj.Collection is the model for the underlying data. Note that the Tab Bar will automatically react to model event from the underlying oj.Collection. See the documentation for oj.CollectionTableDataSource for more details on the available options.

    NOTE: PagingTableDataSource is not supported by Tab Bar.

    Second way is using static HTML content as data.

    Note that any manipulation of static HTML content, including manipulating content generated through Knockout (for example, updating observableArray in a foreach binding), is not supported.

    Example of static content

    <oj-tab-bar> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </oj-tab-bar>

    Key is an identifier which uniquely identifies an item in tabbar.

  • When static html is used, it will be the id attribute of <li> . If no id is specified then component will generate an id and will use it as key.
  • When data source is used, it will be the id attribute of item's data object. Icons

    Sublist icons are inserted automatically. To add other icons to list items, include them in the markup and include the oj-tabbar-item-icon class, as follows: <oj-tab-bar> <li id="foo"><a href="#"><span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"></span>Foo</a></li> </oj-tab-bar> Touch End User Information LeftArrow ( RightArrow in RTL) For horizontal tab bar,focus will be moved to previous visible item. Moves focus to the first visible list item. Moves focus to the last visible list item. If focus is on a list item, pressing F2 will make its contents accessible using TAB. It can also be used to exit actionable mode if already in actionable mode. When F2 mode is enabled, press Esc to exit F2 mode. Ctrl+X Marks the current item to move if reorderable is enabled. Ctrl+V Paste the item that are marked to directly before the current item DELETE Delete the current item. Overflow Menu button Enter or Space Open menu. Refer menu button touch documentation. Note: This is applicable only for Horizontal Tab Bar when overflow is set to popup .

    For all item options, developers can specify a function as the return value. The function takes a single argument, which is an object that contains contextual information about the particular item. This gives developers the flexibility to return different value depending on the context.

    The context paramter contains the following keys:

    Description

    Data Set Size

    As a rule of thumb, it's recommended that applications limit the amount of data to display. Displaying large number of items in Tab Bar makes it hard for user to find what they are looking for, but affects the load time.

    Item Content

    Tab Bar allows developers to specify arbitrary content inside its item. In order to minimize any negative effect on performance, you should avoid putting a large number of heavy-weight components inside because as you add more complexity to the structure, the effect will be multiplied because there can be many items in the Tab Bar.

    Accessibility

    Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast" , in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.

    Reading direction

    The only supported way to set the reading direction (LTR or RTL) is to set the "dir" attribute on the <html> element of the page. As with any JET custom element, in the unusual case that the reading direction is changed post-init, the tab bar must be refresh() ed, or the page must be reloaded. Animation

    Applications can customize animations triggered by actions in Tab Bar by overriding action specific style classes on the animated item. See the documentation of AnimationUtils class for details.

    The following are actions in which applications can use to customize animation effects. Action Description horizontal add When a new item is added to the TableDataSource associated with Horizontal Tab Bar. When a new item is added to the TableDataSource associated with Vertical Tab Bar. horizontal remove When an existing item is removed from the TableDataSource associated with Horizontal Tab Bar. remove When an existing item is removed from the TableDataSource associated with Vertical Tab Bar. update When an existing item is updated in the TableDataSource associated with TabBar. pointerUp When user finish pressing an item (on touch).

    Typescript Import Format 
    //To typecheck the element APIs, import as below.
    import { TabBarElement } from "ojs/ojnavigationlist";

    //For the transpiled javascript to load the element's module, import as below
    import "ojs/ojnavigationlist";

    For additional information visit:

  • Using JET Custom Elements
  • Using JET with TypeScript
  • JET Module Loading

    • Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

    <li id="foo" class="oj-disabled" > <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar>     Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

    The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

    The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

    nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
    all: oj-focus-highlight is applied regardless of the focus mechanism.
    none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

    To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
    Example 
    <oj-tab-bar class="oj-focus-highlight">
  <!-- Content -->
</oj-tab-bar>
    <li id="foo" class="oj-removable" > <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> Use this class to specify the element with the label. This will eliminate the need for Tabbar to automatically wrap any child element that is not an icon or a badge with this class. Note the content must have the correct order (icon element first, then the label element, then the badge element) as Tabbar in this case will not attempt to reorder the content.
    Example 
    <oj-tab-bar class="oj-tabbar-stack-icon-label" >
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        <span class="oj-tabbar-item-label">
        </span>
</oj-tab-bar>
    <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> Use this class to prevent automatic navigation to the url specified on an <a> tag's href attribute.
    In this case, navigation can be handled programmatically by using selectionChanged event.
    This is useful to execute some custom logic before browser triggers navigation.
    Example 
    <oj-tab-bar class="oj-tabbar-nofollow-link" >
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
</oj-tab-bar>
    <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar> Use this class to wrap item label text. Note: On IE11, this is not supported when overflow attribute is set to 'popup'.

    Class template:

    .oj- [size] -condense

    Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

    Values for [size]

    <li id="foo"> <a href="#"> <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> </oj-tab-bar>

    The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot. The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu. To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details. Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

    The itemTemplate slot is used to specify the template for rendering each item in the list. The slot content must be a <template> element. The content of the template could either include the <li> element, in which case that will be used as the root of the item. Or it can be just the content which excludes the <li> element.

    When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item. (See oj.ojTabBar.ItemTemplateContext or the table below for a list of properties available on $current)
  • alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
    • An alias for the current item when referenced inside the item template. This can be especially useful if oj-bind-for-each element is used inside the item template since it has its own scope of data access. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-as-changed Key of the current item. Current item is the list item which is having active focus. Note that if currentItem is set to an item that is currently not available (not fetched or inside a collapsed parent node), then the value is ignored. When the current item is changed, the event.detail of the currentItemChanged event will contain the following additional properties:

    Description Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-current-item-changed The data source for the Tab Bar accepts either a TableDataSource or DataProvider. See the data source section in the introduction for out of the box data source types. If the data attribute is not specified, the child elements are used as content. If there's no content specified, then an empty list is rendered. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-data-changed Whether to display both the label and icons ( "all" ) or just the icons ( "icons" ). In the latter case, the label is displayed in a tooltip instead, unless a tooltip was already supplied at create time. Note: If display="icons" is used with oj-tabbar-item-end then it is supoorted only for badge and not for icon or metadata. If display="stacked" is used with oj-tabbar-item-end then it is supoorted only for badge and not for icon or metadata. It is also mandatory to provide icons for each item as stated in icons section . Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-display-changed This renders list items vertically. Generally used when tab bar placed on right/end of content section.
    Deprecated:
    Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-edge-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-item-changed The renderer function that renders the content of the item. See itemContext in the introduction to see the object passed into the renderer function. The function should return one of the following:
  • An Object with the following property:
    • insert: HTMLElement | string - A string or a DOM element of the content inside the item.
  • undefined: If the developer chooses to manipulate the item element directly, the function should return undefined.
    • If no renderer is specified, Tab Bar will treat the data as a String. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-layout-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-overflow-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-reorderable-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-selection-changed

    A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

    If the component does not contain any translatable resource, the default value of this attribute will be null . If not, an object containing all resources relevant to the component.

    If this component has translations, their documentation immediately follows this doc entry. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-translations-changed

    Provides properties to customize the message text used by Tab Bar when there are no items.

    See the translations attribute for usage examples.

    If not enough space is available to display all of the tabs, then the width of each tab title is restricted just enough to allow all tabs to fit. All tab titles that are truncated are displayed with ellipses. However the width of each tab title will not be truncated below a specific threshold defined by the theme. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-truncation-changed

    Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

    Properties:
    Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects . Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined. Refreshes the visual state of the Tab Bar. JET components require a refresh() after the DOM is programmatically changed underneath the component.

    This method does not accept any arguments. Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document. Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document. Documentation generated by JSDoc 3.4.3 on Fri Feb 16 2024 22:27:18 GMT+0000 (Coordinated Universal Time)

     
    推荐文章
    潇洒的茶壶  ·  全局配置| 文档
    1 年前
    潇洒的茶壶  ·  微信小程序-获取设备信息，状态栏/导航栏/内容/tabBar高度设置原创
    1 年前
    潇洒的茶壶  ·  微信小程序自定义Tabbar | Taro 文档
    1 年前
    潇洒的茶壶  ·  小程序开发实战案例之三| 小程序底部导航栏如何设置- 盐焗代码虾 ...
    1 年前
    潇洒的茶壶  ·  微信小程序底部实现自定义动态Tabbar - Java小学生丶- 博客园
    1 年前
    Link管理   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南