Space - Semi Design Next

Demos

How to import

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

Basic Usage

Code

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>
    );
}

Alignment

You can use align to set the alignment, optional: start, center (default), end, baseline.

文本

标签

文本

标签

文本

标签

文本

标签

Code

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

You can use spacing to set the spacing size, optional: tight (8px, default), medium (16px), loose (24px), and allow to pass in number to customize the spacing size, and also support to pass in array to set the horizontal and vertical spacing at the same time.

tight

medium

loose

array

Code

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>
    );
}

Direction

You can use vertical to set whether the spacing is vertical, the default is false.

Code

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

When the spacing is horizontal, you can use wrap to set whether to wrap automatically, the default is false.

Code

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 Reference

Props

Property	Description	Type	Default
align	Alignment: `start`, `center`, `end` or `baseline`.	`Align`	`"center"`
children	Child nodes, rendered directly inside the root `div` without an extra wrapper.	`ReactNode`	-
className	Class name of the root element.	`string`	-
ref	Reference to the root `div` element.	`Type`	-
spacing	Spacing size: `loose`, `medium`, `tight` or a number of pixels. Pass a `[horizontal, vertical]` array to set each direction.	`Spacing \| [Spacing, Spacing]`	`"tight"`
style	Inline style of the root element. `columnGap` and `rowGap` take precedence over numeric values in `spacing`.	`CSSProperties`	-
vertical	Whether the spacing is vertical.	`boolean`	`false`
wrap	Whether to wrap automatically. Only applies to horizontal spacing.	`boolean`	`false`

Other native attributes (such as id, aria-*, data-* and onClick) fall through to the root div.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$spacing-space-tight	$spacing-tight	默认间距尺寸
$spacing-space-medium	$spacing-base	中等间距尺寸
$spacing-space-loose	$spacing-loose	宽松间距尺寸