间距 - Semi Design Next

代码演示

如何引入

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

基本用法

代码

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

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 { For } from 'solid-js';
import { Button, Space, Tag } from '@fibrous/semi-ui-solid';

const aligns = ['start', 'center', 'end', 'baseline'] as const;
const boxStyle = {
    width: '80px',
    height: '100px',
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'center',
    border: '1px solid var(--semi-color-border)',
    'border-radius': '3px',
};

export default function SpaceDemo() {
    return (
        <Space vertical>
            <For each={aligns}>
                {(align) => (
                    <Space align={align}>
                        <div style={boxStyle}>文本</div>
                        <Button theme="solid" type="primary">
                            按钮
                        </Button>
                        <Tag color="green" size="large">
                            标签
                        </Tag>
                    </Space>
                )}
            </For>
        </Space>
    );
}

间距尺寸

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

tight

medium

loose

array

代码

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

const fourButtons = [1, 2, 3, 4];
const tenButtons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

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

间距方向

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

代码

import { For } from 'solid-js';
import { Button, Space } from '@fibrous/semi-ui-solid';

const fourButtons = [1, 2, 3, 4];

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

设置换行

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

代码

import { For } from 'solid-js';
import { Button, Space } from '@fibrous/semi-ui-solid';

const tenButtons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default function SpaceDemo() {
    return (
        <Space wrap>
            <For each={tenButtons}>
                {() => (
                    <Button theme="solid" type="secondary">
                        按钮
                    </Button>
                )}
            </For>
        </Space>
    );
}

API参考

Props

属性	说明	类型	默认值
align	对齐方式，可选 start、center、end、baseline。	`Align`	`"center"`
spacing	间距尺寸，可选 loose、medium、tight 或数字（像素）；传入 [水平, 垂直] 数组分别设置两个方向。	`Spacing \| [Spacing, Spacing]`	`"tight"`
vertical	是否为垂直间距。	`boolean`	`false`
wrap	是否自动换行，仅水平方向生效。	`boolean`	`false`

Space 直接渲染子节点，不包裹额外元素；class、style、ref 及其余原生属性和事件都落在根 div 上。数字 spacing 按像素输出，style 中的 column-gap、row-gap 优先于数字 spacing。

设计变量

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

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