Tabbar | Press UI

# Tabbar

The bottom navigation bar is used to switch between different pages.

# Code Demo

# Basic usage

<press-tabbar :active="active" @change="onChange">
   <press-tabbar-item icon="home-o">label</press-tabbar-item>
   <press-tabbar-item icon="search">Label</press-tabbar-item>
   <press-tabbar-item icon="friends-o">label</press-tabbar-item>
   <press-tabbar-item icon="setting-o">label</press-tabbar-item>
</press-tabbar>

export default {
   data() {
     return {
       active: 0,
     }
   },
   methods: {
     onChange(value) {
       this.active = value;
     },
   }
};

# Match by name

In the case of a tag specifying a name attribute, the value of v-model is the name of the current tag.

<press-tabbar :active="active" @change="onChange">
   <press-tabbar-item name="home" icon="home-o">label</press-tabbar-item>
   <press-tabbar-item name="search" icon="search">label</press-tabbar-item>
   <press-tabbar-item name="friends" icon="friends-o">label</press-tabbar-item>
   <press-tabbar-item name="setting" icon="setting-o">label</press-tabbar-item>
</press-tabbar>

export default {
   data() {
     return {
       active: 'home',
     }
   },
   methods: {
     onChange(value) {
       this.active = value;
     },
   }
};

# Show logo

<press-tabbar :active="active" @change="onChange">
   <press-tabbar-item icon="home-o">label</press-tabbar-item>
   <press-tabbar-item icon="search" dot>label</press-tabbar-item>
   <press-tabbar-item icon="friends-o" info="5">Label</press-tabbar-item>
   <press-tabbar-item icon="setting-o" info="20">Label</press-tabbar-item>
</press-tabbar>

# Custom icon

Icons can be customized through slots, where icon slot represents the icon in the unselected state, and icon-active slot represents the icon in the selected state.

<press-tabbar :active="active" @change="onChange">
   <press-tabbar-item info="3">
     <img
       slot="icon"
       src="{{ icon. normal }}"
       mode="aspectFit"
       style="width: 30px; height: 18px;"
     />
     <img
       slot="icon-active"
       src="{{ icon.active }}"
       mode="aspectFit"
       style="width: 30px; height: 18px;"
     />
     customize
   </press-tabbar-item>
   <press-tabbar-item icon="search">Label</press-tabbar-item>
   <press-tabbar-item icon="setting-o">label</press-tabbar-item>
</press-tabbar>

export default {
   data() {
     return {
       active: 0,
       icon: {
         normal: '//mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fuser-inactive.png',
         active: '//mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fuser-active.png',
       },
     }
   },
    methods: {
     onChange(value) {
       this.active = value;
     },
   }
};

# Custom Colors

<press-tabbar
   :active="active"
   active-color="#07c160"
   inactive-color="#000"
   @change="onChange"
>
   <press-tabbar-item icon="home-o">label</press-tabbar-item>
   <press-tabbar-item icon="search">Label</press-tabbar-item>
   <press-tabbar-item icon="friends-o">label</press-tabbar-item>
   <press-tabbar-item icon="setting-o">label</press-tabbar-item>
</press-tabbar>

# Switch tab event

<press-tabbar :active="active" @change="onChange">
   <press-tabbar-item icon="home-o">Label 1</press-tabbar-item>
   <press-tabbar-item icon="search">Label 2</press-tabbar-item>
   <press-tabbar-item icon="friends-o">Label 3</press-tabbar-item>
   <press-tabbar-item icon="setting-o">Label 4</press-tabbar-item>
</press-tabbar>

export default {
   data() {
     return {
       active: 'home',
     }
   },
   methods: {
     onClick(value) {
       console.log('value:', value);
     },
   }
};

# API

# Tabbar Props

Parameter	Description	Type	Default
active	index of currently selected tab	number	-
fixed	Whether to fix at the bottom	boolean	`true`
placeholder	When fixed at the bottom, whether to generate a placeholder element of equal height at the label position	boolean	`false`
border	Whether to show the outer border	boolean	`true`
z-index	element z-index	number	`1`
active-color	The color of the selected tab	string	`#1989fa`
inactive-color	Color of inactive tabs	string	`#7d7e80`
safe-area-inset-bottom	Whether to set a bottom safety distance for iPhoneX	boolean	`true`

# Tabbar Event

Event Name	Description	Parameters
@change	Triggered when switching tabs	event.detail: the name or index of the currently selected tab

# TabbarItem Props

Parameter	Description	Type	Default
name	tag name, as an identifier for matching	string \| number	index value of current tag
icon	icon name or image link, see [Ic for optional values]on component](./press-icon-plus)	string	-
icon-prefix	Icon class name prefix, same as class-prefix attribute of Icon component	string	`press-icon`
dot	Whether to display a small red dot	boolean	-
info	Tip information in the upper right corner of the icon	string \| number	-

# TabbarItem Slot

Name	Description
icon	Icon when not selected
icon-active	icon when selected

# Theme customization

--tabbar-height：

--tabbar-background-color：

--tabbar-item-font-size：

--tabbar-item-text-color：

--tabbar-item-active-color：

--tabbar-item-line-height：

--tabbar-item-icon-size：

--tabbar-item-margin-bottom：

横屏

← Tab TreeSelect →