npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@b-design/ui-page

v0.0.1

Published

React component for Alibaba Cloud.

Downloads

12

Readme

@b-design/ui-page

为阿里云控制台或其他中后台系统提供基于页面的基础布局。这个组件一般配合 @alicloud/console-components-app-layout 一起使用。

如果您正在使用 XConsole 框架,那么 XConsole 会帮您应用这个组件,你不需要直接使用它; 如果您没有使用 XConsole 框架,而是单独使用@alicloud/console-components组件库,那么您需要自己应用它。

安装

tnpm i -S @b-design/ui-page
  • 在计算 <Page.Menu> 的布局时使用了 IntersectionObserver API ,目前这个 API 已经于绝大多数的浏览器中得到实现,如果你期望你的布局在低版本的浏览器下可以运行(如 Safari < 12.0),你需要在项目的入口文件引入 polyfill: intersection-observer

使用示例

基本使用

$XView

使用带有二级导航的页面布局

使用 <Page.Content>menu 属性定义页面布局中的二级导航

$XView

自定义「返回上一级」按钮

在某些场景下,你可能希望对「返回上级」的行为进行深度的定制化,使用 <Page.Header>renderBackArrow 属性可以帮助你实现这些自定义的行为,比如使用超链接包裹该按钮

$XView

根据容器宽度自动截断标题

当标题太长,以至于容器宽度不足以容纳的时候,会自动使用@b-design/ui-truncate组件对标题进行截断: $XView

APIs

Page

$XView

Page.Header

定义页面中的头部内容,通常包括面包屑导航 / 页面标题等等

$XView

Page.Content

定义页面主体的内容

$XView

Page.Breadcrumb

用来定义位于Page.Header的面包屑导航。

该组件继承自 @alicloud/console-components 中的 <Breadcrumb> 组件,推荐使用它来定义 Page.Header.breadcrumb 属性的内容:

import Page from '@b-design/ui-page'
import { Link } from 'dva/router'

const { Breadcrumb, Header } = Page

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item key="home">
      <Link to="/home">首页</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="list">
      <Link to="/list">列表</Link>
    </Breadcrumb.Item>
    <Breadcrumb.Item key="detail">详情</Breadcrumb.Item>
  </Breadcrumb>
)

const Detail = () => (
  <Page>
    <Header breadcrumb={breadcrumb} title="详情" />
  </Page>
)

Page.Menu

用来定义位于Page.Content的页面二级导航。

页面一级导航由 @alicloud/console-components-app-layout 组件来定义。

Page.Menu 下包括以下组件:

| 组件 | 继承自 | | :------------: | :-----------: | | Page.Menu | Nav | | Page.Item | Nav.Item | | Page.Group | Nav.Group | | Page.SubMenu | Nav.SubNav | | Page.PopupItem | Nav.PopupItem |