ant-design/components/descriptions/demo/style.tsx
thinkasany 0745996d65
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: ConfigProvider support classNames and styles for Descriptions (#52120)
* draft

* fix

* fix

* add header, title, extra

* add border preview

* update

* update demo

* add divider

* update width

* update SemanticPreview demo
2025-01-02 14:40:48 +08:00

89 lines
1.9 KiB
TypeScript

import React, { useState } from 'react';
import { Descriptions, Divider, Radio, Switch } from 'antd';
import type { DescriptionsProps } from 'antd';
const labelStyle: React.CSSProperties = { background: 'red' };
const contentStyle: React.CSSProperties = { background: 'green' };
type LayoutType = 'horizontal' | 'vertical' | undefined;
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
styles: {
label: labelStyle,
content: contentStyle,
},
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
},
];
const rootStyleItems: DescriptionsProps['items'] = [
{
key: '1',
label: 'Product',
children: 'Cloud Database',
},
{
key: '2',
label: 'Billing Mode',
children: 'Prepaid',
},
{
key: '3',
label: 'Automatic Renewal',
children: 'YES',
styles: {
label: { color: 'orange' },
content: { color: 'blue' },
},
},
];
const App: React.FC = () => {
const [border, setBorder] = useState(true);
const [layout, setLayout] = useState('horizontal' as LayoutType);
return (
<>
<Switch
checkedChildren="Border"
unCheckedChildren="No Border"
checked={border}
onChange={(e) => setBorder(e)}
/>
<Divider />
<Radio.Group onChange={(e) => setLayout(e.target.value)} value={layout}>
<Radio value="horizontal">horizontal</Radio>
<Radio value="vertical">vertical</Radio>
</Radio.Group>
<Divider />
<Descriptions title="User Info" bordered={border} layout={layout} items={items} />
<Divider />
<Descriptions
title="Root style"
styles={{
label: labelStyle,
content: contentStyle,
}}
bordered={border}
layout={layout}
items={rootStyleItems}
/>
</>
);
};
export default App;