Image

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

export default function ImageDemo() {
    return <Image width={360} height={200} alt="Abstract colorful artwork" src="/assets/root-web-sites/abstract.jpg" />;
}

import { IconUploadError } from '@fibrous/semi-icons-solid';
import { Image } from '@fibrous/semi-ui-solid';

export default function ImageDemo() {
    return (
        <div style={{ display: 'flex', 'align-items': 'center', 'flex-direction': 'column' }}>
            <span>加载失败默认样式</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" />
            <br />
            <span>自定义加载失败占位图</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" fallback={<IconUploadError style={{ 'font-size': '50px' }} />} />
        </div>
    );
}

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

export default function ImageDemo() {
    const [timestamp, setTimestamp] = createSignal('');
    return (
        <>
            <Image width={300} height={200} alt="Abstract colorful artwork" src={`/assets/root-web-sites/abstract-big.png?${timestamp()}`} placeholder={<Image src="/assets/root-web-sites/abstract-small.jpeg" width={300} height={200} alt="" preview={false} />} />
            <br />
            <Button
                theme="solid"
                onClick={() => {
                    setTimestamp(String(Date.now()));
                }}
                style={{ 'margin-top': '10px' }}
            >
                Reload
            </Button>
        </>
    );
}

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

export default function ImageDemo() {
    return (
        <Image
            width={300}
            height={200}
            alt="Abstract colorful artwork"
            src="/assets/root-web-sites/abstract-small.jpeg"
            preview={{
                src: '/assets/root-web-sites/abstract-big.png',
            }}
        />
    );
}

import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

export default function ImageDemo() {
    return (
        <ImagePreview>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
        </ImagePreview>
    );
}

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

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

export default function ImageDemo() {
    const [visible1, setVisible1] = createSignal(false);
    const [visible2, setVisible2] = createSignal(false);

    return (
        <>
            <Button onClick={() => setVisible1(true)}>Preview single Image</Button>
            <ImagePreview src="/assets/root-web-sites/sky.jpg" visible={visible1()} onVisibleChange={(visible) => setVisible1(visible)} />
            <br />
            <Button onClick={() => setVisible2(true)} style={{ 'margin-top': '20px' }}>
                Preview multiple Images
            </Button>
            <ImagePreview src={srcList} previewTitle="Scenery" visible={visible2()} onVisibleChange={(visible) => setVisible2(visible)} />
        </>
    );
}

import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

export default function ImageDemo() {
    return (
        <div id="container" style={{ height: '400px', position: 'relative' }}>
            <ImagePreview
                getPopupContainer={() => {
                    const node = document.getElementById('container') as HTMLElement;
                    return node;
                }}
                style={{ height: '100%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }}
            >
                <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
            </ImagePreview>
        </div>
    );
}

import { Index } from 'solid-js';
import { IconChevronLeft, IconChevronRight, IconDownload, IconMinus, IconPlus, IconRealSizeStroked, IconRotate, IconWindowAdaptionStroked } from '@fibrous/semi-icons-solid';
import { Button, Image, ImagePreview, type ImagePreviewMenuProps } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

// the preview calls the renderer once and the menu's fields are getters, so each JSX expression reads them live
function renderPreviewMenu(menu: ImagePreviewMenuProps) {
    return (
        <div style={{ background: 'grey', height: '40px', width: '280px', display: 'flex', 'align-items': 'center', 'justify-content': 'space-around', 'border-radius': '3px' }}>
            <Button aria-label="上一张" icon={<IconChevronLeft size="large" />} type="tertiary" onClick={menu.onPrev} disabled={menu.disabledPrev} />
            <Button aria-label="下一张" icon={<IconChevronRight size="large" />} type="tertiary" onClick={menu.onNext} disabled={menu.disabledNext} />
            <Button aria-label="缩小" icon={<IconMinus size="large" />} type="tertiary" onClick={menu.onZoomOut} disabled={menu.disabledZoomOut} />
            <Button aria-label="放大" icon={<IconPlus size="large" />} type="tertiary" onClick={menu.onZoomIn} disabled={menu.disabledZoomIn} />
            <Button aria-label={menu.ratio === 'adaptation' ? '原始尺寸' : '适应页面'} icon={menu.ratio === 'adaptation' ? <IconRealSizeStroked size="large" /> : <IconWindowAdaptionStroked size="large" />} type="tertiary" onClick={menu.onRatioClick} />
            <Button aria-label="旋转" icon={<IconRotate size="large" />} type="tertiary" onClick={menu.onRotateLeft} />
            <Button aria-label="下载" icon={<IconDownload size="large" />} type="tertiary" onClick={menu.onDownload} disabled={menu.disableDownload} />
        </div>
    );
}

export default function ImageDemo() {
    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
        </ImagePreview>
    );
}

import { Index } from 'solid-js';
import { IconInfoCircle } from '@fibrous/semi-icons-solid';
import { Divider, Image, ImagePreview, Tooltip, type ImagePreviewMenuProps } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

// the preview calls the renderer once and the menu items stay live, so the JSX reads them directly
function renderPreviewMenu(menu: ImagePreviewMenuProps) {
    return (
        <div style={{ display: 'flex', 'background-color': 'rgba(0, 0, 0, 0.75)', 'align-items': 'center', padding: '5px 16px', 'border-radius': '4px' }}>
            {menu.menuItems?.slice(0, 3)}
            <Divider layout="vertical" />
            {menu.menuItems?.slice(3, 7)}
            <Divider layout="vertical" />
            {menu.menuItems?.slice(7)}
            <Divider layout="vertical" />
            <Tooltip content="我是一个自定义操作">
                <IconInfoCircle size="large" />
            </Tooltip>
        </div>
    );
}

export default function ImageDemo() {
    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} />}</Index>
        </ImagePreview>
    );
}

import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg'];

export default function ImageDemo() {
    return (
        <ImagePreview
            renderHeader={(title) => (
                <div style={{ width: '100%', height: '100%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }}>
                    <span style={{ background: 'black', padding: '0 10px' }}>自定义标题：{title}</span>
                </div>
            )}
        >
            <div>
                <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} preview={{ previewTitle: `lamp${index + 1}` }} style={{ 'margin-right': '5px' }} />}</Index>
            </div>
        </ImagePreview>
    );
}