北极星盒子
Box是最原始的布局组件。这是一种访问北极星设计令牌的方法。
α
该组件及其文档正在开发中。在北极星的非主要版本中可能会有突破性的变化。请谨慎使用。
默认情况下，方框没有填充、边框、边框半径、背景或阴影。
进口反应从“反应”；进口｛盒子，文本｝从“@shopify /北极星”；函数BoxDefaultExample（）｛返回（<盒子><占位符标签＝“盒子里的内容”/></盒子>）；｝常量占位符＝（｛标签＝”，高度＝“汽车”，宽度＝“汽车”｝）=＞｛返回（<div风格＝｛｛背景：“# 7 b47f1”，高度：高度，宽度：宽度，｝｝><div风格＝｛｛颜色：“# FFFFFF”，｝｝><文本作为＝“氢气”变体＝“bodyMd”fontWeight＝“媒介”>｛标签｝</文本></div></div>）；｝；道具
想要帮助完善这个功能吗?请分享你的反馈．
接口
BoxProps
- 孩子们? 反应．ReactNode
- 作为? “div”|“跨越”|“节”|“传奇”|“ul”|“李”
-
元素类型。
默认为“div”．
- 背景? ColorsBackdropTokenAlias|ColorsBackgroundTokenAlias|ColorsOverlayTokenAlias|ColorsActionTokenAlias|ColorsSurfaceTokenAlias
-
背景颜色。
- 边境? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
边框样式。
- borderBlockEnd? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
垂直端边框样式。
- borderInlineOB欧宝娱乐APPStart? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
水平开始边框样式。OB欧宝娱乐APP
- borderInlineEnd? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
水平端边框样式。
- borderBlockOB欧宝娱乐APPStart? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
垂直开始边框样式。OB欧宝娱乐APP
- borderRadius? “05”|' 1 '|' 2 '|“3”|“4”|“5”|“6”|“基地”|“大”|“一半”
-
边界半径。
- borderRadiusEndOB欧宝娱乐APPStart? “05”|' 1 '|' 2 '|“3”|“4”|“5”|“6”|“基地”|“大”|“一半”
-
垂直结束水平开始边界半径。OB欧宝娱乐APP
- borderRadiusEndEnd? “05”|' 1 '|' 2 '|“3”|“4”|“5”|“6”|“基地”|“大”|“一半”
-
垂直端水平端边界半径。
- borderRadiusOB欧宝娱乐APPStartStart? “05”|' 1 '|' 2 '|“3”|“4”|“5”|“6”|“基地”|“大”|“一半”
-
垂直开始水平开始边OB欧宝娱乐APP界半径。
- borderRadiusOB欧宝娱乐APPStartEnd? “05”|' 1 '|' 2 '|“3”|“4”|“5”|“6”|“基地”|“大”|“一半”
-
垂直开始水平结束边OB欧宝娱乐APP界半径。
- borderWidth? “1”|“2”|“3”|“4”|“5”
-
边框宽度。
- borderBlockOB欧宝娱乐APPStartWidth? “1”|“2”|“3”|“4”|“5”
-
垂直开始边框宽度。OB欧宝娱乐APP
- borderBlockEndWidth? “1”|“2”|“3”|“4”|“5”
-
垂直端边框宽度。
- borderInlineOB欧宝娱乐APPStartWidth? “1”|“2”|“3”|“4”|“5”
-
水平开始边框宽度。OB欧宝娱乐APP
- borderInlineEndWidth? “1”|“2”|“3”|“4”|“5”
-
水平端边框宽度。
- 颜色? “文本”|“text-critical”|“text-disabled”|“text-highlight”|“text-on-critical”|“text-on-dark”|“text-on-interactive”|“text-on-primary”|“text-primary”|“text-primary-hovered”|“text-primary-pressed”|“text-subdued”|“text-subdued-on-dark”|“text-success”|“text-warning”
-
孩子的颜色。
- id? 字符串
-
HTML id属性。
- minHeight? 字符串
-
集装箱最低高度。
- minWidth? 字符串
-
容器的最小宽度。
- maxWidth? 字符串
-
集装箱的最大宽度。
- overflowX? “隐藏”|“滚动”
-
夹横向内容的儿童。
- overflowY? “隐藏”|“滚动”
-
竖夹儿童内容。
- 填充? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
在孩子周围保持间隔。接受不同屏幕大小的间隔令牌或间隔令牌对象。
- paddingBlockOB欧宝娱乐APPStart? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
孩子周围垂直开始间OB欧宝娱乐APP隔。接受不同屏幕大小的间隔令牌或间隔令牌对象。
- paddingBlockEnd? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
垂直端间距周围的儿童。接受不同屏幕大小的间隔令牌或间隔令牌对象。
- paddingInlineOB欧宝娱乐APPStart? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
水平启动间隔周围的儿童OB欧宝娱乐APP。接受不同屏幕大小的间隔令牌或间隔令牌对象。
- paddingInlineEnd? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
水平端间距周围的儿童。接受不同屏幕大小的间隔令牌或间隔令牌对象。
- 角色? 任何
-
咏叹调的角色。
- 影子? “按钮”|“基地”|“透明”|“模糊”|“深度”|“顶部栏”|“卡”|“窗”|“层”|“模态”
-
盒子上的影子。
- tabIndex? 任何
-
设置制表符顺序。
- 宽度? 字符串
-
容器宽度。
- 位置? “相对”|“绝对”|“固定”|“粘”
-
箱子的位置。
- insetBlockOB欧宝娱乐APPStart? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
盒子顶部位置。
- insetBlockEnd? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
箱子底部位置。
- insetInlineOB欧宝娱乐APPStart? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
盒子左侧位置。
- insetInlineEnd? T| {[断点在BreakpointsAlias] ?：T；｝<SpacingSpaceScale>
-
盒子的右边位置。
- 不透明度? 字符串
-
盒子的不透明度。
- 大纲? “基地”|“黑暗”|“分”|“divider-on-dark”|“透明”
-
轮廓的风格。
- printHidden? 布尔
-
在打印过程中隐藏内容。
- visuallyHidden? 布尔
-
视觉上隐藏内容(仍然由屏幕阅读器宣布)。
- zIndex? 字符串
-
盒子的z指数。
相关的组件
- 对于更具体的用例，使用Card组件