Space - Semi Design Next

Demos

How to import

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

Basic Usage

Code

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

Alignment

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

文本

标签

文本

标签

文本

标签

文本

标签

Code

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

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

Direction

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

Code

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

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

Code

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 Reference

Props

Property	Description	Type	Default
align	Alignment: start, center, end or baseline.	`Align`	`"center"`
spacing	Spacing size: loose, medium, tight or a number of pixels. Pass a [horizontal, vertical] array to set each direction.	`Spacing \| [Spacing, Spacing]`	`"tight"`
vertical	Whether the spacing is vertical.	`boolean`	`false`
wrap	Whether to wrap automatically. Only applies to horizontal spacing.	`boolean`	`false`

Space renders its children directly without wrapping them. class, style, ref and other native attributes and events fall through to the root div. A numeric spacing is output in pixels, and column-gap or row-gap in style take precedence over it.

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	宽松间距尺寸