关闭按钮

一个用于关闭模态框和警报等内容的通用关闭按钮。

示例

结果

正在加载...

实时编辑器

import CloseButton from 'react-bootstrap/CloseButton';

function BasicExample() {
  return <CloseButton />;
}

export default BasicExample;

import CloseButton from 'react-bootstrap/CloseButton';

function BasicExample() {
  return <CloseButton />;
}

export default BasicExample;

禁用状态

Bootstrap 为禁用的关闭按钮添加了相关的样式，以防止用户交互。

结果

正在加载...

实时编辑器

import CloseButton from 'react-bootstrap/CloseButton';

function DisabledExample() {
  return <CloseButton disabled />;
}

export default DisabledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function DisabledExample() {
  return <CloseButton disabled />;
}

export default DisabledExample;

变体

使用 variant="white" 将默认的深色更改为白色。

注意！

Bootstrap v5.3.0 中引入了颜色模式，组件的深色变体已弃用。不要添加 variant="white"，而是在根元素、父级包装器或组件本身设置 data-bs-theme="dark"。

结果

正在加载...

实时编辑器

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div data-bs-theme="dark" className='bg-dark p-2'>
      <CloseButton />
      <CloseButton disabled />
    </div>
  );
}

export default VariantsExample;

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div data-bs-theme="dark" className='bg-dark p-2'>
      <CloseButton />
      <CloseButton disabled />
    </div>
  );
}

export default VariantsExample;

无障碍性

为了确保关闭按钮组件的最佳无障碍性，建议您为屏幕阅读器提供相关的文本。以下示例通过 aria-label 属性展示了此组件的无障碍使用方式。

结果

正在加载...

实时编辑器

import CloseButton from 'react-bootstrap/CloseButton';

function LabelledExample() {
  return <CloseButton aria-label="Hide" />;
}

export default LabelledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function LabelledExample() {
  return <CloseButton aria-label="Hide" />;
}

export default LabelledExample;

示例​

禁用状态​

变体​

无障碍性​

API​

关闭按钮​

示例

禁用状态

变体

无障碍性

API

关闭按钮