Widget Components

WidgetBrand

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetBrand
          color="twitter"
          rightHeader="973k"
          rightFooter="followers"
          leftHeader="1.792"
          leftFooter="tweets"
        >
          <CIcon
            name="cibTwitter"
            height="52"
            className="my-4"
          />
        </CWidgetBrand>
      </div>
    </div>
  )
  

# WidgetBrand API

WidgetDropdown

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetDropdown
          color="gradient-warning"
          header="9.823"
          text="Members online"
          footerSlot={
            <div
              className={'text-center'}
              style={{ height: '100px' }}
            >
              (Chart)
            </div>
          }
        >
          <CDropdown>
            <CDropdownToggle color="transparent">
              <CIcon name={'cilSettings'} size={'md'}/>
            </CDropdownToggle>
            <CDropdownMenu className="p-0" placement="bottom-end">
              <CDropdownItem>Action</CDropdownItem>
              <CDropdownItem>Another action</CDropdownItem>
              <CDropdownItem>Something else here...</CDropdownItem>
            </CDropdownMenu>
          </CDropdown>
        </CWidgetDropdown>
      </div>
    </div>
  )
  

# WidgetDropdown API

WidgetIcon

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetIcon text="income" header="$1.999,50" color="primary">
          <CIcon name={'cilSettings'} size={'xl'}/>
        </CWidgetIcon>
      </div>
    </div>
  )
  

# WidgetIcon API

WidgetProgress

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetProgress
          color="success"
          header="89.9%"
          text="Lorem ipsum..."
          footer="Lorem ipsum dolor sit amet enim."
        />
      </div>
    </div>
  )
  

# WidgetProgress API

WidgetProgressIcon

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetProgressIcon
          header="87.500"
          text="Visitors"
          color="gradient-info"
        >
          <CIcon name="cilSettings" size="xl"/>
        </CWidgetProgressIcon>
      </div>
    </div>
  )
  

# WidgetProgressIcon API

WidgetSimple

Usage

Example

Script

  return (
    <div className={'row mt-2'}>
      <div className={'col-6'}>
        <CWidgetSimple header="title" text="1,123">
          (Chart)
        </CWidgetSimple>
      </div>
    </div>
  )
  

# WidgetSimple API