😍
Framer API 中文版
  • 写在前面
  • 从这里开始
    • 介绍
      • 快速开始
      • 基础
    • 教程
      • 准备 Setup
      • 引入 Slider 组件
      • Slider组件的元素
      • 拖动 & MotionValue
      • Hooks & 传递数据
      • 完成
      • 回顾
    • 简要案例
      • Frame
      • Stack
      • Animate
      • Gestures
      • Dragging 拖拽
      • Scrolling 滚动
      • Paging 翻页
      • Tranforms 变换
      • Variants 动画状态组
  • LIBRARY 库
    • Frame
      • Layout 布局
      • Visual 视觉
      • Transform 变换
      • Animation 动画
      • Transition 过渡
      • Variants 动画状态组
      • Tap 点击
      • Hover 悬浮
      • Pan
      • Drag
      • Types
    • Animation
      • Overview
      • Animation controls
      • Tween
      • Spring
      • Inertia 惯性
      • Orchestration
      • Types
    • Color
      • Create
      • Modify
      • Convert
      • Compare
      • Models
    • Page
      • Content
      • Padding
      • Events
      • Effects
      • PageEffectInfo
    • Scroll
      • Sizing
      • Content
      • Events
    • Stack
      • Content
      • Padding
    • Utilities
      • Transfrom
      • useTransform
      • useAnimation
      • useCycle
      • useMotionValue
      • useSpring
      • useViewportScroll
  • FRAMER X
    • Assets
      • Functions
    • Data & Overrides
    • CanvasComponents
      • Canvas.tsx
      • Layout
      • Colors
    • PropertyControls
      • Adding Controls
      • Hiding Controls
      • Array
      • Boolean
      • Color
      • ComponentInstance
      • Enum
      • File
      • FusedNumber
      • Image
      • Number
      • SegmentedEnum
      • String
    • Render Target
      • Properties
      • Functions
Powered by GitBook
On this page

Was this helpful?

  1. LIBRARY 库
  2. Stack

Content

direction: StackDirection

设置内部元素的排布方向,"vertical'或者"horizontal"。默认是"vertical"。

// Vertical
<Stack direction="vertical" />

// Horizontal
<Stack direction="horizontal" />

gap: number

子元素之间的间隔,默认是10。

<Stack gap={120} />

alignment: StackAlignment

设置内部元素布局的在交叉轴上的对齐方式,"start". "end" 或者"center", 默认是center。这里可以参考flex布局中的align-items属性

<Stack alignment="end" />

distribution: StackDistribution

定义内部元素的分布方式。默认是"space-around"。

- "start" --- 靠容易左边对齐

- "center" --- 布局在容器的中间

- "end" --- 靠容器右边对齐

- "space-around" --- 两端元素到容器边的距离等于中间元素之间的间隔一半

- "space-between" --- 两端对齐,中间的元素间隔平分多余的空间

- "space-evently" --- 所有元素的间距相等

// Default
<Stack distribution="space-around" />

// Start
<Stack distribution="start" />

// Center
<Stack distribution="center" />

// End
<Stack distribution="end" />

// Space Between
<Stack distribution="space-between" />

// Space Around
<Stack distribution="space-around" />

// Space Evenly
<Stack distribution="space-evenly" />
PreviousStackNextPadding

Last updated 5 years ago

Was this helpful?