diff --git a/src/Card/demos/Grid.tsx b/src/Card/demos/Grid.tsx new file mode 100644 index 0000000..0a6ce21 --- /dev/null +++ b/src/Card/demos/Grid.tsx @@ -0,0 +1,19 @@ +import { Card } from '@yuntijs/ui'; + +export default () => { + const content = + 'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution. '; + const gridStyle: React.CSSProperties = { + width: '50%', + textAlign: 'center', + }; + return ( + + + {content} + + {content} + {content} + + ); +}; diff --git a/src/Card/demos/Meta.tsx b/src/Card/demos/Meta.tsx new file mode 100644 index 0000000..00595f4 --- /dev/null +++ b/src/Card/demos/Meta.tsx @@ -0,0 +1,12 @@ +import { Card, Logo } from '@yuntijs/ui'; + +export default () => { + const description = + 'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution. '; + + return ( + + } description={description} title="YuntiUI Card.Meta" /> + + ); +}; diff --git a/src/Card/demos/Playground.tsx b/src/Card/demos/Playground.tsx new file mode 100644 index 0000000..888c337 --- /dev/null +++ b/src/Card/demos/Playground.tsx @@ -0,0 +1,32 @@ +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import type { CardProps } from '@yuntijs/ui'; +import { Card } from '@yuntijs/ui'; + +export default () => { + const store = useCreateStore(); + const control: CardProps | any = useControls( + { + title: 'YuntiUI Card', + extra: 'extra', + bordered: true, + loading: false, + hoverable: true, + children: + 'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.', + type: { + options: ['inner'], + value: 'default', + }, + size: { + options: ['default', 'small'], + value: 'default', + }, + }, + { store } + ); + return ( + + + + ); +}; diff --git a/src/Card/demos/Tab.tsx b/src/Card/demos/Tab.tsx new file mode 100644 index 0000000..f2134d7 --- /dev/null +++ b/src/Card/demos/Tab.tsx @@ -0,0 +1,57 @@ +import { Card } from '@yuntijs/ui'; +import { useState } from 'react'; + +export default () => { + const tabList = [ + { + key: 'Themeable', + label: 'Themeable', + }, + { + key: 'Fast', + label: 'Fast', + }, + { + key: 'Light & Dark UI', + label: 'Light & Dark UI', + }, + ]; + const [activeTabKey, setActiveTabKey] = useState(tabList[0].key); + const onTabChange = (key: string) => { + setActiveTabKey(key); + }; + const contentList: Record = { + 'Themeable': ( +

+ Provides a simple way to customize default themes, you can change the colors, fonts, + breakpoints and everything you need. +

+ ), + 'Fast': ( +

+ voids unnecessary styles props at runtime, making it more performant than other UI + libraries. +

+ ), + 'Light & Dark UI': ( +

+ Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML + theme prop changes. +

+ ), + }; + return ( + More} + tabList={tabList} + tabProps={{ + size: 'middle', + }} + > + {contentList[activeTabKey]} + + ); +}; diff --git a/src/Card/demos/index.tsx b/src/Card/demos/index.tsx new file mode 100644 index 0000000..b2624e3 --- /dev/null +++ b/src/Card/demos/index.tsx @@ -0,0 +1,29 @@ +import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'; +import { Card } from '@yuntijs/ui'; + +export default () => { + return ( + , + , + , + ]} + bordered={true} + cover={ + example + } + extra="extra" + hoverable={true} + loading={false} + title="YuntiUI Card" + > + The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully + compatible with Antd components, and it is recommended to use antd-style as the default + css-in-js styling solution. + + ); +}; diff --git a/src/Card/index.md b/src/Card/index.md new file mode 100644 index 0000000..623d7ad --- /dev/null +++ b/src/Card/index.md @@ -0,0 +1,51 @@ +--- +nav: Components +group: Data Display +title: Card +description: A container for displaying information. +--- + +## Usage + +based on antd [Card](https://ant.design/components/card-cn/) component. + +### Simple usage + +```jsx | pure +import { Card } from '@yuntijs/ui'; + +export default () => { + return ( + + The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution. + + ); +}; +``` + + + +### Card.Meta usage + + + +### Card.Grid usage + + + +### Card.Tab usage + + + +## Playground + + + +## APIs + + diff --git a/src/Card/index.tsx b/src/Card/index.tsx new file mode 100644 index 0000000..c045814 --- /dev/null +++ b/src/Card/index.tsx @@ -0,0 +1 @@ +export { Card, type CardProps } from 'antd'; diff --git a/src/index.ts b/src/index.ts index e3f8a4e..93e0e78 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,6 +7,7 @@ export * from './Tree'; // ~ custom antd export * from './Alert'; +export * from './Card'; // ~ antd export { @@ -20,6 +21,20 @@ export { type AutoCompleteProps, Avatar, type AvatarProps, + BackTop, + type BackTopProps, + Badge, // @todo composed type + type BadgeProps, + Button, // @todo dependence unifiedLink. link type, hover primary color, back button + type ButtonProps, + Calendar, + type CalendarProps, + Carousel, + type CarouselProps, + Checkbox, + type CheckboxProps, + ColorPicker, + type ColorPickerProps, } from 'antd'; // ~ antd-style