跳到主要内容

按钮

基础使用​

Loading...
function Demo() {

  return (

    <SpaceItems>

      <CButton label="普通按钮" />

      <CButton label="轮廓按钮" outlined />

      <CButton label="禁用状态" disabled />

      <CButton label="圆角按钮" rounded />

      <CButton label="圆边按钮" round />

      <CButton label="扁平按钮" rounded flat />

    </SpaceItems>

  )

}
折叠/展开 代码

主题​

Loading...
<SpaceItems>

  <CButton label="主色按钮" theme="primary" />

  <CButton label="辅色按钮" theme="secondary" />

  <CButton label="警告色按钮" theme="warning" />

  <CButton label="消极色按钮" theme="negative" />

  <CButton label="主色按钮" theme="primary" outlined />

  <CButton label="辅色按钮" theme="secondary" outlined />

  <CButton label="警告色按钮" theme="warning" outlined />

  <CButton label="消极色按钮" theme="negative" outlined />

  <CButton label="主色按钮" theme="primary" flat />

  <CButton label="辅色按钮" theme="secondary" flat />

  <CButton label="警告色按钮" theme="warning" flat />

  <CButton label="消极色按钮" theme="negative" flat />

</SpaceItems>
折叠/展开 代码

不同尺寸​

Loading...
<SpaceItems>

  <CButton label="超小尺寸按钮" size="xs" />

  <CButton label="小尺寸按钮" size="sm" />

  <CButton label="中等尺寸钮" size="md" />

  <CButton label="大尺寸按钮" size="lg" />

  <CButton label="超大尺寸按钮" size="xl" />

</SpaceItems>
折叠/展开 代码

块级​

Loading...
<div>

  <div className="c-mb-md">

    <CButton label="块级按钮" block size="lg" theme="warning" />

  </div>

  <div className="c-mb-md">

    <CButton label="块级按钮" block size="lg" rounded />

  </div>

  <div>

    <CButton label="块级按钮" block size="lg" round theme="negative" outlined />

  </div>

</div>
折叠/展开 代码

加载状态​

Loading...
<SpaceItems>

  <CButton label="提交中" size="sm" loading />

  <CButton label="提交中" loading />

  <CButton label="提交中" size="lg" loading />

  <CButton rounded label="提交中" loading />

  <CButton rounded label="提交中" loading outlined />

  <CButton round label="提交中" loading />

  <CButton round outlined label="提交中" loading />

</SpaceItems>
折叠/展开 代码

自定义加载动画​

Loading...
<SpaceItems>

  <CButton label="提交中" loading customLoading={<CLoadingAudio />} />

  <CButton label="提交中" outlined loading customLoading={<CLoadingCube />} />

</SpaceItems>
折叠/展开 代码

图标按钮​

Loading...
<SpaceItems>

  <CButton icon style={{ fontSize: '20px' }}>

    <CIcon content={MdIcons.matLightbulb} />

  </CButton>

  <CButton icon outlined style={{ fontSize: '32px' }}>

    <CIcon content={MdIcons.matHouse} />

  </CButton>

  <CButton icon outlined style={{ fontSize: '32px' }} theme="negative">

    <CIcon content={MdIcons.matPerson} />

  </CButton>

  <CButton icon style={{ fontSize: '56px' }} theme="secondary">

    <CIcon content={MdIcons.matSupervisedUserCircle} />

  </CButton>

  <CButton icon style={{ fontSize: '56px' }} theme="warning">

    <CIcon content={MdIcons.matDeviceHub} />

  </CButton>

</SpaceItems>
折叠/展开 代码

Props​

名称 (*代表必须)描述类型默认值
No Data