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

@alifd/mobile-layout

v1.0.7

Published

<p align="center"> <a href="https://fusion.design/" target="_blank"> <img alt="Fusion" src="https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg" width="200"> </a> </p>

Downloads

76

Readme

介绍

一套面向移动端的布局解决方案。🔗 使用文档

目标:不再写任何布局 CSS 代码

特性:

  • 支持栅栏布局,并可自定义 BreakPoints
  • 弹性的容器计算,完美适配各类屏幕(手表/手机/平板/桌面)
  • 大小布局模式拆分,逻辑清晰,布局灵活
  • 完美支持小程序(微信、支付宝、钉钉)

大布局

  • <Page>: 页
    • <Page.Header>: 序章
    • <Page.Content>: 内容
    • <Page.Footer>: 终章
  • <Section>: 章
  • <Block>: 区块

小布局

  • <Cell>: 单元格,主轴默认为 垂直方向的 flex 排版
  • <Row>: 行
  • <Col>: 列
  • <Grid>: 网格

段落&文本

  • <P>: 段落
  • <Text>: 文本

大布局模式

用于在页面栅栏系统的上构建出整个页面的骨架,其最终产物的是一组响应式布局的空容器。

代码:

<Page
  breakPoints={[
    {
      width: 200,
      maxContentWidth: 200,
      numberOfColumns: 1,
    },
    {
      width: 320,
      maxContentWidth: 320,
      numberOfColumns: 2,
    },
    {
      width: 750,
      maxContentWidth: 750,
      numberOfColumns: 4,
    },
    {
      width: 1125,
      maxContentWidth: 1125,
      numberOfColumns: 8,
    },
    {
      width: Infinity,
      maxContentWidth: Infinity,
      numberOfColumns: 12,
    },
  ]}
>
  <Section>
    <Block span={6}>...</Block>
    <Block span={6}>...</Block>
  </Section>
</Page>

Block 列宽计算规则

组件会根据页面宽度自动计算栅栏数量和 Block 的列宽,计算逻辑为:

以屏幕宽度从 12 列模式收缩到 8 列为例, 6,4,2,4 布局, 子元素的列宽会经历如下调整:

小布局模式

小布局指按照 RowColGrid 相互嵌套的方式,将 Block 内部切割为多个内容区域的规范和操作方式。

独立单元格

<Cell />

横向拆分

<Row>
  <Cell />
  <Cell />
</Row>

纵向拆分

<Col>
  <Cell />
  <Cell />
</Col>

网格拆分

<Grid cols="{2}">
  <Cell />
  <Cell />
  <Cell />
  <Cell />
</Grid>

复合拆分

<Row>
  <Cell />
  <Col>
    <Cell />
    <Cell />
  </Col>
</Row>

段落&文本

在单个 Cell 中对组件进行横向排版。如文本居中对齐:

<p align="center">
  <Text type="h1">文本</Text>
  <Text type="body1">文本</Text>
  <button>button</button>
</p>

使用

1. 安装

npm install @alifd/mobile-layout --save

2. 导入 Fusion Mobile 主题

引入 Fusion Mobile 的主题,此主题可以通过 Fusion 站点定制生成,或者使用默认主题:

import { Page, Section, Block, Row, Cell, P, Text } from '@alife/mobile-layout';
import { Button } from '@alifd/meet';

// 导入一套 Fusion 移动端主题 (参见 Fusion 官网介绍)
import '@alifd/meet/es/core/index.css';

<Page>
  <Section>
    <Block span={2}>
      <Row>
        <Cell>
          <Button>按钮 1</Button>
        </Cell>
        <Cell>
          <Button>按钮 2</Button>
        </Cell>
      </Row>
    </Block>
    <Block span={2}>
      <Cell verAlign="middle">
        <P align="right">
          <Text>文本</Text>
          <Text>文本</Text>
        </P>
      </Cell>
    </Block>
  </Section>
</Page>;

3. 注意事项

建议使用 “自然布局” 为整个页面布局,以达到最优效果,所有的内容都渲染在支持的容器中

API

Page

页面

| 参数 | 含义 | 类型 | 默认值 | | ------------------ | -------------------------------------------- | ------------------------------------------------- | ------------- | | prefix | CSS 类名前缀, | string | pro-layout- | | noPadding | 禁用页面内边距,包括 Header, Content, Footer | Boolean | false | | noBlockCorner | 禁用区块的边角(通常在无页面内容间隙时使用) | Boolean | false | | sectionGap | Header、Footer、Nav、Aside 和章节之间间隙 | Number | - | | blockGap | Section 中栅栏布局间隙 | Number | - | | gridGap | 小布局间隙(包含行、列、网格布局) | Number | - | | children | 子元素 | RaxNode | - | | breakPoints | 断点信息 | BreakPoint[] | - | | onBreakPointChange | 断点变更回调 | (curBreakPoint, oldBreakPoint, breakPoints)=>void | |

BreakPoint

断点配置信息,通过传入一组断点信息,来配置页面在不同页面尺寸下的展示模式(栅栏列数 + 内容区域最大宽)。

| 参数 | 含义 | 类型 | 默认值 | | --------------- | ---------------------- | ------ | ------ | | width | 断点适配的最大屏幕宽度 | Number | - | | maxContentWidth | 适配屏幕下最大内容宽度 | Number | - | | numberOfColumns | 栅栏列数 | Number | - |

Page.Header

序章

| 参数 | 含义 | 类型 | 默认值 | | --------------- | ------------------------------------------- | ------- | --------- | | mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | surface | | noBottomPadding | 隐藏默认底部内边距 | Boolean | - | | divider | 展示分割线 | Boolean | - | | children | 子元素 | RaxNode | - |

Page.Footer

终章

| 参数 | 含义 | 类型 | 默认值 | | ------------ | ------------------------------------------- | ------- | --------- | | mode | 背景色 'lining' / 'surface' / 'transparent' | Enum | surface | | noTopPadding | 隐藏默认顶部内边距 | Boolean | - | | divider | 展示分割线 | Boolean | - | | fixed | 固定在底部 | Boolean | | | children | 子元素 | RaxNode | - |

Page.Content

内容

| 参数 | 含义 | 类型 | 默认值 | | -------- | ------ | ------- | ------ | | children | 子元素 | RaxNode | - |

Section

| 参数 | 含义 | 类型 | 默认值 | | ---------- | ----------------------------- | ------- | ------ | | title | 标题 | RaxNode | - | | titleAlign | 标题位置,可选值 left/center | Enum | - | | extra | 附加区域(标题右侧) | RaxNode | - | | gap | 自定义内部区块(Block)的间隙 | Number | - | | children | 子元素 | RaxNode | - |

Block

区块(节)

| 参数 | 含义 | 类型 | 默认值 | | ---------------- | ----------------------------------------------------------------- | ------------- | ------ | | mode | 背景模式,可选值 transparent(自动移除内边距和标题)/surface/lining | Enum | - | | title | 标题 | RaxNode | - | | titleAlign | 标题位置,可选值 left/center | Enum | - | | extra | 附加区域(标题右侧) | RaxNode | - | | divider | 展示标题与内容之间的分割线 | Boolean | - | | bordered | 展示边框 | Boolean | - | | noPadding | 移除内边距 | Boolean | false | | span | 列宽 | Number | - | | width | 指定宽度 | Number | - | | contentClassName | 有标题时,内容区域的样式名 | string | - | | contentStyle | 有标题时,内容区域的自定义样式 | CSSProperties | - | | children | 子元素 | RaxNode | - |

Row

| 参数 | 含义 | 类型 | 默认值 | | -------- | --------------------------------------------------------- | ------- | ------ | | width | 指定宽度 | Number | - | | autoFit | 根据内容自适应宽度(当作为行列布局的子元素时生效) | Boolean | - | | verAlign | 垂直对齐方式, 可选值:top/middle/bottom/stretch/baseline | Enum | - | | gap | 自定义元素间间距 | Number | - | | children | 子元素 | RaxNode | - |

Col

| 参数 | 含义 | 类型 | 默认值 | | -------- | -------------------------------------------------- | ------- | ------ | | autoFit | 根据内容自适应宽度(当作为行列布局的子元素时生效) | Boolean | - | | align | 水平对齐方式, 可选值:left/center/right/stretch | Enum | - | | gap | 自定义元素间间距 | Number | - | | children | 子元素 | RaxNode | - |

Grid

网格

| 参数 | 含义 | 类型 | 默认值 | | ---------- | --------------------------------------------- | ---------------------------- | ------ | | cols | 指定列数 | number | | | rows | 指定行数 | number | | | minWidth | 单元格最小宽度 | number | | | maxWidth | 单元格最大宽度 | number | | | rowGap | 单元格行间距, 可选值: small/medium/large/数值 | Enum | | | colGap | 单元格列间距, 可选值: small/medium/large/数值 | Enum | | | renderItem | 手动渲染单个单元格内容 | (rowIndex,colIndex)=>RaxNode | | | children | 子元素,默认应为 Cell | RaxNode | - |

Cell

单元格,其内容默认为 flex 纵向布局

| 参数 | 含义 | 类型 | 默认值 | | -------- | ------------------------------------------------------------------------------------ | ------- | ------ | | width | 指定宽度 | Number | - | | autoFit | 根据内容自适应宽度(当作为行列布局的子元素时生效) | Boolean | - | | gap | 自定义内部元素的行解析 | Number | 0 | | align | 内容水平对齐方式, 可选值: left/center/right | Enum | - | | verAlign | 内容垂直对齐方式, 可选值: top/middle/bottom/space-between/space-around/space-evenly | Enum | - | | block | 使用 block 布局 | Boolean | - | | children | 子元素 | RaxNode | - |

区别:

  • <Cell> 设置 gap 时,每一行的高度是自适应的
  • <Col> 设置 gap 时,默认每一行的高度是等分的

Space

空间间隙

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------------------------------- | ------- | ------ | | direction | 组件自身布局模式,可选: hoz/ver | Enum | hoz | | size | 尺寸, 可选: small/medium/large/Number | Enum | medium | | children | 子元素 | RaxNode | |

P

段落

| 参数 | 说明 | 类型 | 默认值 | | ------------ | -------------------------------------------------------------------------- | ------- | ---------- | | align | 水平方向对齐模式 left/center/right/space-between/space-around/space-evenly | Enum | 'left' | | verAlign | 垂直方向对齐模式 top/middle/bottom/baseline | Enum | 'baseline' | | spacing | 子元素间保持水平间距, 可选: small/medium/large/false | Enum | medium | | verMargin | 除 Text 节点外子元素间保持垂直外边距 | Boolean | true | | beforeMargin | 段前外边距(第一个子元素无效) | Number | 0 | | afterMargin | 段尾外边距(最后一个子元素无效) | Number | 0 | | children | 子元素 | RaxNode | - |

Text

文本

| 参数 | 说明 | 类型 | 默认值 | | --------- | ----------------------------------------------------------------- | ------- | ------ | | type | 约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6 | Enum | | | delete | 添加删除线样式 | Boolean | false | | mark | 添加标记样式 | Boolean | false | | underline | 添加下划线样式 | Boolean | false | | strong | 是否加粗 | Boolean | false | | code | 添加代码样式 | Boolean | false | | color | 颜色 | String | - |

CSS 变量

| 变量名 | 说明 | 默认值 | | --------------------------------- | ---------------------- | ---------------------- | | --color-transparent | 前景色 | transparent | | --color-surface | 前景色 | #fff | | --color-lining | 衬色 | #f0f0f0 | | --page-padding-lr | 页面左右内边距 | var(--s-3) | | --page-padding-tb | 页面上下内边距 | var(--s-3) | | --page-header-divider-color | header 分割线颜色 | var(--color-line1-1) | | --page-block-corner | 区块圆角尺寸 | var(--corner-0) | | --page-block-padding-lr | 区块左右内边距 | var(--s-3) | | --page-block-padding-tb | 区块上下内边距 | var(--s-3) | | --page-section-title-font-color | 章节标题颜色 | var(--color-text1-4) | | --page-section-extra-font-color | 章节附加内容文本颜色 | var(--color-text1-2) | | --page-block-title-font-color | 区块标题颜色 | var(--color-text1-4) | | --page-block-extra-font-color | 区块附加内容文本颜色 | var(--color-text1-2) | | --page-section-gap | 章间隙 | var(--s-3) | | --page-block-gap | 区块间隙 | var(--s-2) | | --page-block-border-width | 区块边框宽度 | var(--line-1) | | --page-block-border-color | 区块边框颜色 | var(--color-line1-1) | | --page-grid-gap | 小布局间隙 | var(--s-1) | | --page-p-small-spacing | 段落子元素的水平小间距 | var(--s-1) | | --page-p-medium-spacing | 段落子元素的水平中间距 | var(--s-2) | | --page-p-large-spacing | 段落子元素的水平大间距 | var(--s-4) | | --page-p-el-margin | 段落子元素的上下间距 | var(--s-1) | | --page-p-font-color | 段落默认字体色 | var(--color-text1-4) |

在大布局模式下,如果需要支持较大屏幕, 则 CSS 单位需要视情况选择 rpxpx