语义UI | 弹出

简介

语义UI(semantic-ui)是一款现代化的前端开发框架，其具有灵活的语义化标记、简单的语法和全面的主题设置。其中的弹出组件(pop)是其重要的交互组件之一，可以用于各种场景的提示、通知和选择。

安装

可以通过CDN、npm或下载源码来安装语义UI。以下是npm安装示例：

npm install semantic-ui-css semantic-ui-react

弹出组件

弹出组件提供了多种弹出方式和内容展现方式，常用的有以下几种：

提示框

提示框可以用于提示用户操作结果或操作建议。用法如下：

import { Popup } from 'semantic-ui-react';
<Popup content='确认删除吗？' trigger={<Button>Delete</Button>} />

结果如下图所示：

弹出菜单

弹出菜单可以用于展示下拉选择菜单。用法如下：

import { Popup, Menu } from 'semantic-ui-react';
<Popup
  trigger={<Button>Show menu</Button>}
  content={
    <Menu>
      <Menu.Item>Home</Menu.Item>
      <Menu.Item>About</Menu.Item>
      <Menu.Item>Contact</Menu.Item>
    </Menu>
  }
  on='click'
  position='bottom center'
/>

结果如下图所示：

弹出窗口

弹出窗口可以用于展示更大的内容或复杂的操作。用法如下：

import { Popup, Button, Icon, Header, Image, Modal } from 'semantic-ui-react';
const ModalExample = () => (
  <Popup
    trigger={<Button>Show modal</Button>}
    modal
    closeOnEscape
    closeOnDocumentClick
    content={<ModalContent />}
    on='click'
    position='bottom center'
  />
);
const ModalContent = () => (
  <Modal>
    <Modal.Header>Select a Photo</Modal.Header>
    <Modal.Content image>
      <Image wrapped size='medium' src='/images/wireframe/image.png' />
      <Modal.Description>
        <Header>Default Profile Image</Header>
        <p>
          We've found the following gravatar image associated with your e-mail
          address.
        </p>
        <p>Is it okay to use this photo?</p>
      </Modal.Description>
    </Modal.Content>
    <Modal.Actions>
      <Button color='black'>
        <Icon name='remove' /> No
      </Button>
      <Button color='green'>
        <Icon name='checkmark' /> Yes
      </Button>
    </Modal.Actions>
  </Modal>
);

结果如下图所示：

总结

语义UI的弹出组件提供了多种弹出方式和内容展现方式，能够满足各种场景的需求。它的使用简单、灵活、美观，是现代化前端开发的良好选择。