en-US

This example shows the effect of different style configurations.

zh-CN

该示例展示了不同样式配置下的效果。

import { useState } from 'react';

import { EditOutlined, DeleteOutlined, EllipsisOutlined } from '@react-devui/icons';
import { DCard, DRadio } from '@react-devui/ui';

export default function Demo() {
  const [border, setBorder] = useState(true);
  const [shadow, setShadow] = useState(false);

  return (
    <>
      <DRadio.Group
        dList={[true, false].map((border) => ({
          label: border ? 'Border' : 'No border',
          value: border,
        }))}
        dModel={border}
        dType="outline"
        onModelChange={setBorder}
      />
      <br />
      <DRadio.Group
        dList={[true, false, 'hover'].map((shadow) => ({
          label: shadow === true ? 'Shadow' : shadow === false ? 'No shadow' : 'Hover shadow',
          value: shadow,
        }))}
        dModel={shadow}
        dType="outline"
        onModelChange={setShadow}
      />
      <br />
      <DCard style={{ width: 300 }} dBorder={border} dShadow={shadow}>
        <DCard.Content>
          <div className="app-demo-text-container">
            <div>Some contents...</div>
            <div>Some contents...</div>
            <div>Some contents...</div>
          </div>
        </DCard.Content>
        <DCard.Actions
          dActions={[
            <DCard.Action title="edit">
              <EditOutlined />
            </DCard.Action>,
            <DCard.Action title="delete">
              <DeleteOutlined />
            </DCard.Action>,
            <DCard.Action title="more">
              <EllipsisOutlined />
            </DCard.Action>,
          ]}
        ></DCard.Actions>
      </DCard>
    </>
  );
}