@fiscozen/ 容器

灵活布局组件,用于组织具有可控间隔的内容. 支持纵向取向和水平取向,并有自定义的缺口大小.

特征

• 纵向和横向布局方向
• 横向容器的布局变体(expand-first, (中文(简体) ), expand-all, (中文(简体) ), expand-equal, (中文(简体) ), space-between, (中文(简体) ), expand-last(中文(简体) )
• 通过横轴对齐 alignItems (开始/中心/结束/拉伸/基线)
• 自定义的空格大小( E)none 编号 : xs 编号 : sm 编号 : base 编号 : lg)带有单独的主比分
• 不同间隔尺度的主要和部分容器变体
• 垂直模式相接段落之间的特殊间隔
• 用于语义标记的灵活 HTML 标签渲染

安装

npm install @fiscozen/container

基本用途

垂直布局( 默认)

<script setup>
import { FzContainer } from '@fiscozen/container'
</script>

<template>
  <FzContainer main>
    <FzContainer>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </FzContainer>

    <FzContainer>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </FzContainer>
  </FzContainer>
</template>

水平布局

<template>
  <FzContainer horizontal>
    <button>Action 1</button>
    <button>Action 2</button>
    <button>Action 3</button>
  </FzContainer>
</template>

道具

差距大小

该组件使用CSS自定义属性来进行整个设计系统的一致间隔.

主要集装箱main={true}(中文(简体) )

集装箱main={false} 或违约)

主要集装箱 用于页面级别部分,并使用更大的间隔值. 部门集装箱 用于各节内的内容,并使用较小的间隔值,另加 none 财务报告和审定财务报表 xs 选项.

方向行为

垂直( 默认)

• 元素垂直堆叠
• 垂直应用元素间的差距
• 相接段落的特殊间隔p + p用于改进可读性
• 大多数使用的默认布局
• 默认对齐 : alignItems="stretch" (要素扩展至全宽)

水平

• 元素在一行中水平对齐
• 横向应用元素间的差距
• 不包装——元素保持单行
• 想要动作按钮、内置控制或水平导航
• 通过 layout 道具(见下文布局行为部分)
• 默认对齐 : alignItems="center" (纵向中心)

布局行为( 仅Horizontal)

这个 layout 道具控制儿童元素如何扩张,以在水平容器中填充可用的空间. 此道具只在 horizontal 实值 true。 。 。 .

可用布局

何时使用每个布局

default: 当所有元素都应保持其自然大小时使用. 对按钮组、导航项目或元素不应生长的任何水平列表都有好处.

expand-first: 当您想要第一个元素占用所有剩余空间时使用。 用于 [content | actions] 工具栏.

expand-all: 当您想要所有元素都增长并吸收额外的水平空间时使用(对于具有可比较标签长度的按钮组是好的). 请注意,最终宽度仍然取决于每个孩子的内容——对于真正相同的宽度,使用 expand-equal。 。 。 .

expand-equal: 当列无论内容如何都必须有相同的宽度时使用(在矩阵中的卡片,等式工具栏部分,仪表板平板砖). 取舍:具有很长的不可破碎内容的儿童可能会视而不见地超越其位置.

space-between: 当想要元素保持其自然大小但被分布到可用的空间时使用.

expand-last: 当您想要占用所有剩余空间时使用。 用于 [actions | content] 右侧区域应扩展的图案.

对齐项目行为

这个 alignItems 道具控制儿童元素如何与 横轴 (与主轴相接.

垂直容器

控件 水平对齐 要点:

stretch (默认):填充容器宽度的元素拉长 start: 元素向左对齐 center: 元素横向居中 end: 元素与右边对齐 baseline: 元素与其文本基线一致

水平容器

控件 垂直对齐 要点:

start: 元素对齐到顶端 center (默认):元素垂直居中 end: 元素对齐到下方 stretch: 填充容器高度的元素拉伸 baseline: 元素与其文本基线一致(对文本有用)

实例

有不同缺口的嵌入式集装箱

<template>
  <FzContainer main gap="lg">
    <h1>Page Title</h1>
    
    <FzContainer>
      <h2>Section Title</h2>
      <p>Content paragraph 1</p>
      <p>Content paragraph 2</p>
    </FzContainer>
    
    <FzContainer gap="sm">
      <label>Form Label</label>
      <input type="text" />
      <span>Helper text</span>
    </FzContainer>
  </FzContainer>
</template>

水平按钮组

<template>
  <FzContainer horizontal gap="sm">
    <button>Cancel</button>
    <button>Save Draft</button>
    <button>Publish</button>
  </FzContainer>
</template>

自定义 HTML 标记

<template>
  <FzContainer tag="section" main>
    <h1>Section Content</h1>
    <p>This container renders as a section element</p>
  </FzContainer>
</template>

布局: 先展开( 任务列表)

<template>
  <FzContainer gap="sm">
    <FzContainer horizontal layout="expand-first" gap="base">
      <FzContainer gap="sm">
        <p>Task name that can be very long</p>
        <p>Task description that will expand to fill available space</p>
      </FzContainer>
      <button>Complete</button>
    </FzContainer>
    
    <FzContainer horizontal layout="expand-first" gap="base">
      <FzContainer gap="sm">
        <p>Another task</p>
        <p>With another description</p>
      </FzContainer>
      <button>Complete</button>
    </FzContainer>
  </FzContainer>
</template>

布局: 先展开( 表格动作)

<template>
  <FzContainer gap="base">
    <input type="text" placeholder="Form field..." />
    <input type="text" placeholder="Another field..." />
    
    <!-- Actions aligned to the right -->
    <FzContainer horizontal layout="expand-first" gap="base">
      <FzContainer></FzContainer>
      <FzContainer horizontal gap="sm">
        <button>Cancel</button>
        <button>Save</button>
      </FzContainer>
    </FzContainer>
  </FzContainer>
</template>

布局: 全部展开

<template>
  <FzContainer horizontal layout="expand-all" gap="base">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </FzContainer>
</template>

布局: 全部展开

<template>
  <FzContainer horizontal layout="expand-all" gap="lg">
    <div class="card">
      <h3>Card 1</h3>
      <p>Content here</p>
    </div>
    <div class="card">
      <h3>Card 2</h3>
      <p>Content here</p>
    </div>
    <div class="card">
      <h3>Card 3</h3>
      <p>Content here</p>
    </div>
  </FzContainer>
</template>

布局: 展开等同

<template>
  <!-- All three buttons end up with identical widths even with asymmetric labels -->
  <FzContainer horizontal layout="expand-equal" gap="base">
    <button>OK</button>
    <button>Salva e continua</button>
    <button>Annulla</button>
  </FzContainer>
</template>

<template>
  <!-- Grid-like rows where columns must align across rows -->
  <FzContainer gap="sm">
    <FzContainer horizontal layout="expand-equal" gap="base">
      <div class="tile">Tile A</div>
      <div class="tile">Tile B with a much longer title</div>
      <div class="tile">C</div>
    </FzContainer>
    <FzContainer horizontal layout="expand-equal" gap="base">
      <div class="tile">Tile D</div>
      <div class="tile">Tile E</div>
      <div class="tile">Tile F</div>
    </FzContainer>
  </FzContainer>
</template>

相同的宽度和相同的高度

组合 layout="expand-equal" 与 alignItems="stretch" 即使儿童的内容内在高度不同,也要使儿童横行的宽度和高度一致。 这是FzContainer的"克线"配方.

<template>
  <FzContainer horizontal layout="expand-equal" alignItems="stretch" gap="base">
    <div class="tile">Short tile</div>
    <div class="tile">Medium tile<br/>with two lines</div>
    <div class="tile">Tall tile<br/>with three<br/>lines of content</div>
  </FzContainer>
</template>

全部三块瓷砖最终都有相同的宽度(从 expand-equal和相同的高度(从 alignItems="stretch",与最高的孩子匹配.

布局: 间距

<template>
  <FzContainer horizontal layout="space-between" gap="base">
    <div class="logo">Logo</div>
    <nav>
      <FzContainer horizontal gap="sm">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </FzContainer>
    </nav>
  </FzContainer>
</template>

布局: 间距

<template>
  <FzContainer horizontal layout="space-between" gap="base">
    <FzContainer gap="xs">
      <h1>Page Title</h1>
      <p>Subtitle or description</p>
    </FzContainer>
    <FzContainer horizontal gap="sm">
      <button>Cancel</button>
      <button>Save</button>
    </FzContainer>
  </FzContainer>
</template>

布局: 最后一次展开( 任务列表)

<template>
  <FzContainer gap="sm">
    <FzContainer horizontal layout="expand-last" gap="base">
      <button>Complete</button>
      <FzContainer gap="sm">
        <p>Task name that can be very long</p>
        <p>Task description that will expand to fill available space</p>
      </FzContainer>
    </FzContainer>

    <FzContainer horizontal layout="expand-last" gap="base">
      <button>Complete</button>
      <FzContainer gap="sm">
        <p>Another task</p>
        <p>With another description</p>
      </FzContainer>
    </FzContainer>
  </FzContainer>
</template>

布局: 最后一次展开( 表格动作)

<template>
  <FzContainer gap="base">
    <input type="text" placeholder="Form field..." />
    <input type="text" placeholder="Another field..." />

    <!-- Actions aligned to the left -->
    <FzContainer horizontal layout="expand-last" gap="base">
      <FzContainer horizontal gap="sm">
        <button>Cancel</button>
        <button>Save</button>
      </FzContainer>
      <FzContainer></FzContainer>
    </FzContainer>
  </FzContainer>
</template>

对齐项目:与中心对齐的垂直容器

<template>
  <FzContainer alignItems="center" gap="base">
    <h1>Centered Title</h1>
    <p>Centered paragraph</p>
    <button>Centered button</button>
  </FzContainer>
</template>

对齐项目: 垂直容器对齐

<template>
  <FzContainer alignItems="end" gap="sm">
    <p>Amount: €100</p>
    <p>Tax: €22</p>
    <p>Total: €122</p>
  </FzContainer>
</template>

对齐项目:水平容器与顶部对齐

<template>
  <FzContainer horizontal alignItems="start" gap="base">
    <img src="icon.png" style="height: 40px" />
    <div>
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </FzContainer>
</template>

对齐项目:水平容器与基线对齐

<template>
  <FzContainer horizontal alignItems="baseline" gap="base">
    <span style="font-size: 0.75rem">Small text</span>
    <span style="font-size: 1rem">Medium text</span>
    <span style="font-size: 1.5rem">Large text</span>
  </FzContainer>
</template>

字法笔记

在使用垂直方向时,组件在相接的段落元素之间适用特殊间隔(<p>提高可读性。 此间距由 --paragraph-gap CSS自定义属性并覆盖默认的空白,以便更好的打字.

这种特殊间隔不适用于横向方向,因为横向段落布局并不常见.

无障碍

该组件使 HTML 语义化,并可使用 tag 使用适当的语义元素的道具(例如, form)基于您的内容结构.