ant-design/components/float-button/demo/render-panel.md
二货爱吃白萝卜 d08deeeb8a
feat: FloatButton PurePanel (#38199)
* refactor: Popout FloatButton component

* test: Update snapshot

* docs: add BackTop

* test: Update snapshot

* chore: fix compile

* chore: fix ts

* chore: pure panel size
2022-10-24 23:15:39 +08:00

1.4 KiB

order title debug
99
zh-CN en-US
_InternalPanelDoNotUseOrYouWillBeFired _InternalPanelDoNotUseOrYouWillBeFired
true

zh-CN

调试用组件,请勿直接使用。

en-US

Debug usage. Do not use in your production.

import React from 'react';
import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';

/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalFloatButton } = FloatButton;

export default () => (
  <div style={{ display: 'flex', columnGap: 16, alignItems: 'center' }}>
    <InternalFloatButton backTop />
    <InternalFloatButton icon={<CustomerServiceOutlined />} />
    <InternalFloatButton
      icon={<QuestionCircleOutlined />}
      description="HELP"
      shape="square"
      type="primary"
    />
    <InternalFloatButton
      shape="square"
      items={[
        {
          icon: <QuestionCircleOutlined />,
        },
        {
          icon: <CustomerServiceOutlined />,
        },
        {
          icon: <SyncOutlined />,
        },
      ]}
    />
    <InternalFloatButton
      icon={<CustomerServiceOutlined />}
      trigger="click"
      open
      items={[
        {
          icon: <QuestionCircleOutlined />,
        },
        {
          icon: <CustomerServiceOutlined />,
        },
        {
          icon: <SyncOutlined />,
        },
      ]}
    />
  </div>
);