Press UI

Provides navigation for the page, often used at the top of the page.

# Code Demo

# Basic usage

<press-nav-bar
   title="title"
   left-text="Back"
   right-text="button"
   left-arrow
   @click-left="onClickLeft"
   @click-right="onClickRight"
/>

export default {
   methods: {
     onClickLeft() {
     },
     onClickRight() {
     },
   }
}

# Advanced usage

Customize content through slots.

<press-nav-bar title="Title" left-text="Back" left-arrow>
   <press-icon-plus name="search" slot="right" />
</press-nav-bar>

# API

# Props

Parameter Description Type Default
title title string ''
left-text left text string ''
right-text right text string ''
left-arrow Whether to show the left arrow boolean false
fixed Whether to fix at the top boolean false
placeholder Whether to enable placeholder when pinned to the top boolean false
border Whether to show the bottom border boolean true
z-index element z-index number 1
custom-style root node custom style string -
safe-area-inset-top Whether to leave a top safe distance (status bar height) boolean true

# Slot

Name Description
title custom title
left Customize the content of the left area
right Customize the content of the right area

# Events

Event Name Description Parameters
click-left Triggered when the left button is clicked -
click-right Triggered when the right button is clicked -

# External style classes

class name description
custom-class root node style class
title-class title style class

# Theme customization

--nav-bar-height：
--nav-bar-background-color：
--nav-bar-arrow-size：
--nav-bar-icon-color：
--nav-bar-text-color：
--nav-bar-title-font-size：
--nav-bar-title-text-color：
横屏

← Sidebar →