间距 - Semi Design Next

代码演示

如何引入

import { Space } from '@fibrous/semi-ui-react';

基本用法

代码

import { Space, Button, Switch } from '@fibrous/semi-ui-react';

export default function SpaceDemo() {
    return (
        <Space>
            <Switch aria-label="示例开关" defaultChecked />
            <Button type="secondary">次要</Button>
            <Button type="tertiary">第三</Button>
            <Button type="warning">警告</Button>
        </Space>
    );
}

对齐方式

可使用 align 设置对齐方式，可选值：start、center（默认）、end、baseline。

文本

标签

文本

标签

文本

标签

文本

标签

代码

import { Space, Button, Tag } from '@fibrous/semi-ui-react';

export default function SpaceDemo() {
    const divStyle = {
        width: 80,
        height: 100,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid var(--semi-color-border)',
        borderRadius: 3,
    };
    return (
        <Space vertical>
            <Space align="start">
                <div style={divStyle}>文本</div>
                <Button theme="solid" type="primary">
                    按钮
                </Button>
                <Tag color="green" size="large">
                    标签
                </Tag>
            </Space>
            <Space align="center">
                <div style={divStyle}>文本</div>
                <Button theme="solid" type="primary">
                    按钮
                </Button>
                <Tag color="green" size="large">
                    标签
                </Tag>
            </Space>
            <Space align="end">
                <div style={divStyle}>文本</div>
                <Button theme="solid" type="primary">
                    按钮
                </Button>
                <Tag color="green" size="large">
                    标签
                </Tag>
            </Space>
            <Space align="baseline">
                <div style={divStyle}>文本</div>
                <Button theme="solid" type="primary">
                    按钮
                </Button>
                <Tag color="green" size="large">
                    标签
                </Tag>
            </Space>
        </Space>
    );
}

间距尺寸

可使用 spacing 设置间距大小，内置可选值：tight（8px，默认）、medium（16px）、loose（24px），并且支持传入 number 来自定义间距大小，也支持传入 array 来同时设置水平和垂直方向的间距。

tight

medium

loose

array

代码

import { Space, Tabs, TabPane, Button } from '@fibrous/semi-ui-react';

export default function SpaceDemo() {
    return (
        <Tabs type="line">
            <TabPane tab="tight" itemKey="1">
                <Space spacing="tight" style={{ marginTop: '15px' }}>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                </Space>
            </TabPane>
            <TabPane tab="medium" itemKey="2">
                <Space spacing="medium" style={{ marginTop: '15px' }}>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                </Space>
            </TabPane>
            <TabPane tab="loose" itemKey="3">
                <Space spacing="loose" style={{ marginTop: '15px' }}>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                </Space>
            </TabPane>
            <TabPane tab="array" itemKey="4">
                <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                    <Button theme="solid" type="primary">
                        按钮
                    </Button>
                </Space>
            </TabPane>
        </Tabs>
    );
}

间距方向

可使用 vertical 设置间距是否为垂直方向，默认情况下为 false。

代码

import { Space, Button } from '@fibrous/semi-ui-react';

export default function SpaceDemo() {
    return (
        <Space vertical>
            <Button theme="solid" type="primary">
                按钮
            </Button>
            <Button theme="solid" type="primary">
                按钮
            </Button>
            <Button theme="solid" type="primary">
                按钮
            </Button>
            <Button theme="solid" type="primary">
                按钮
            </Button>
        </Space>
    );
}

设置换行

当间距为水平方向时，可使用 wrap 设置是否自动换行，默认情况下为 false。

代码

import { Space, Button } from '@fibrous/semi-ui-react';

export default function SpaceDemo() {
    return (
        <Space wrap>
            {Array.from({ length: 10 }, (_item, idex) => (
                <Button theme="solid" type="secondary" key={idex}>
                    按钮
                </Button>
            ))}
        </Space>
    );
}

API参考

Props

属性	说明	类型	默认值
align	对齐方式，可选 `start`、`center`、`end`、`baseline`。	`Align`	`"center"`
children	子节点，直接渲染在根 `div` 内，不额外包裹元素。	`ReactNode`	-
className	根元素的类名。	`string`	-
ref	根 `div` 元素的引用。	`Type`	-
spacing	间距尺寸，可选 `loose`、`medium`、`tight` 或数字（像素）；传入 `[水平, 垂直]` 数组分别设置两个方向。	`Spacing \| [Spacing, Spacing]`	`"tight"`
style	根元素的内联样式，其中 `columnGap`、`rowGap` 优先于 `spacing` 中的数字间距。	`CSSProperties`	-
vertical	是否为垂直间距。	`boolean`	`false`
wrap	是否自动换行，仅水平方向生效。	`boolean`	`false`

其他原生属性（如 id、aria-*、data-*、onClick）落在根 div 上。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$spacing-space-tight	$spacing-tight	默认间距尺寸
$spacing-space-medium	$spacing-base	中等间距尺寸
$spacing-space-loose	$spacing-loose	宽松间距尺寸