徽章 React 组件

徽章 React 组件代表徽章元素，可用于列表、链接、导航栏等。

徽章组件

以下组件包含在内

徽章

徽章属性

属性	类型	默认值	描述
<Badge> 属性
tooltip	字符串		工具提示文本，用于在悬停/按下时显示
tooltipTrigger	字符串	悬停	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`

示例

badge.jsx

import React from 'react';
import {
  Navbar,
  NavRight,
  Toolbar,
  Page,
  Link,
  Badge,
  List,
  ListItem,
  Icon,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar sliding title="Badge">
      <NavRight>
        <Link iconOnly>
          <Icon ios="f7:person_circle_fill" md="material:person">
            <Badge color="red">5</Badge>
          </Icon>
        </Link>
      </NavRight>
    </Navbar>
    <Toolbar bottom tabbar icons>
      <Link tabLink="#tab-1" tabLinkActive>
        <Icon ios="f7:envelope_fill" md="material:email">
          <Badge color="green">5</Badge>
        </Icon>
        <span className="tabbar-label">Inbox</span>
      </Link>
      <Link tabLink="#tab-2">
        <Icon ios="f7:calendar_fill" md="material:today">
          <Badge color="red">7</Badge>
        </Icon>
        <span className="tabbar-label">Calendar</span>
      </Link>
      <Link tabLink="#tab-3">
        <Icon ios="f7:cloud_upload_fill" md="material:file_upload">
          <Badge color="red">1</Badge>
        </Icon>
        <span className="tabbar-label">Upload</span>
      </Link>
    </Toolbar>

    <List strongIos outlineIos dividersIos>
      <ListItem title="Foo Bar" badge="0">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Ivan Petrov" badge="CEO" badgeColor="blue">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="John Doe" badge="5" badgeColor="green">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Jane Doe" badge="NEW" badgeColor="orange">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
  </Page>
);

改进此文档

在此页面

徽章组件
徽章属性
示例