@ant-design/icons#ContainerOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#ContainerOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: inline-collapsed.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
render() {
    return (
      <div style={{ width: 256 }}>
        <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
          {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
        </Button>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            Option 1
          </Menu.Item>
          <Menu.Item key="2" icon={<DesktopOutlined />}>
            Option 2
          </Menu.Item>
          <Menu.Item key="3" icon={<ContainerOutlined />}>
            Option 3
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
          </SubMenu>
        </Menu>
      </div>
    );
  }
Example #2
Source File: index.js    From getlink-next with MIT License 4 votes vote down vote up 
App = ({ user, isAdmin, isDev }) => {
  const [type, setType] = useState('image');

  const handleTypeChange = useCallback((e) => {
    setType(e.key);
  }, []);

  return (
    <Context.Provider value={{ user, isAdmin, isDev }}>
      <Layout style={{ height: '100%', flexDirection: 'row' }}>
        <HTMLHead />
        <Sider
          breakpoint="lg"
          collapsedWidth={0}
        >
          <a className="logo" href="https://github.com/int64ago/getlink-next" target="_blank">
            Get Link!
          </a>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[type]}
            onClick={handleTypeChange}
          >
            <Menu.Item key="image">
              <FileImageOutlined />IMAGE
            </Menu.Item>
            <Menu.Item key="video">
              <VideoCameraOutlined />VIDEO
            </Menu.Item>
            <Menu.Item key="file">
              <FileOutlined />FILE
            </Menu.Item>
            <Menu.Item key="placeholder">
              <ContainerOutlined />Placeholder
            </Menu.Item>
            <Menu.Item key="qrcode">
              <QrcodeOutlined />QR Code
            </Menu.Item>
            <Menu.Item key="urlshorten">
              <LinkOutlined />URL Shortener
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ background: '#fff', overflow: 'hidden' }}>
          <Header>
            {user ? (
              <Dropdown overlay={(
                <Menu>
                  <Menu.Item>
                    <a href="/api/logout">Logout</a>
                  </Menu.Item>
                </Menu>
              )}>
                <Avatar src={user.picture} />
              </Dropdown>
            ) : (
              <div>
                <Button type="link" href="/api/login">Login</Button>
              </div>
            )}
          </Header>
          <Content
                style={{
                  padding: 24,
                  height: '100%',
                  background: '#fff',
                  overflow: 'auto',
                }}
          >
            {type === 'image' && <Uploader type="image" />}
            {type === 'video' && <Uploader type="video" />}
            {type === 'file' && <Uploader type="file" />}
            {type === 'qrcode' && <QRCode />}
            {type === 'urlshorten' && <ShortUrl />}
            {type === 'placeholder' && <Placeholder />}
          </Content>
        </Layout>
      </Layout>
    </Context.Provider>
  );
}