Display multiple read-only fields in a group.
Descriptions
import { Descriptions } from '@yuntijs/ui';Display multiple read-only fields in a group.
import { Descriptions } from '@yuntijs/ui';based on antd Descriptions component.
import { Descriptions } from '@yuntijs/ui';
export default () => {
return (
<Descriptions
title="YuntiUI"
column={2}
colon={false}
labelStyle={{ width: 120 }}
items={[
{
key: 'Themeable',
label: 'Themeable',
children: 'Customize default themes',
},
{
key: 'Fast',
label: 'Fast',
children: 'voids unnecessary styles props',
},
{
key: 'Light & Dark UI',
label: 'Light & Dark UI',
children: 'Automatic dark mode recognition',
},
]}
/>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| prefixCls | -- | string | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| style | -- | {} | -- |
| bordered | -- | boolean | -- |
| size | -- | "small"|"middle"|"default" | -- |
| children | -- | ReactNode | -- |
| title | -- | ReactNode | -- |
| extra | -- | ReactNode | -- |
| column | -- | number|Partial___type | -- |
| layout | -- | "vertical"|"horizontal" | -- |
| colon | -- | boolean | -- |
| labelStyle | -- | {} | -- |
| contentStyle | -- | {} | -- |
| styles | -- | {root?:any;title?:any;content?:any;header?:any;extra?:any;label?:any} | -- |
| classNames | -- | {root?:any;title?:any;content?:any;header?:any;extra?:any;label?:any} | -- |
| items | -- | DescriptionsItemType[] | -- |
| id | -- | string | -- |
| borderedBottom | -- | boolean | -- |
| borderedBottomDashed | -- | boolean | -- |
| borderedTop | -- | boolean | -- |
| borderedTopDashed | -- | boolean | -- |
ThemeableCustomize default themes | Fastvoids unnecessary styles props |
Light & Dark UIAutomatic dark mode recognition | |
ThemeableCustomize default themes |
Fastvoids unnecessary styles props |
Light & Dark UIAutomatic dark mode recognition |