.

Tencent · Nov 21, 2023 · 27c65af · 27c65af
1 parent 9318bd7
commit 27c65af
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 135 deletions.
diff --git a/packages/omiu/package-lock.json b/packages/omiu/package-lock.json
diff --git a/packages/omiu/package.json b/packages/omiu/package.json
@@ -18,7 +18,8 @@
     "omi-router": "^4.1.1",
     "omi-suspense": "^0.0.5",
     "omi-transition": "^0.1.0",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "swiper": "^11.0.4"
   },
   "devDependencies": {
     "@types/markdown-it": "^13.0.6",

diff --git a/packages/omiu/src/components/card/CardPage.tsx b/packages/omiu/src/components/card/CardPage.tsx
@@ -25,7 +25,9 @@ export class ButtonPage extends Component {
           </h2>
           {/* <!-- Description --> */}
           <p className="mb-3">
-            The Card component is a versatile and reusable UI component that displays content within a card-like container. It can be used to display images, text, and other types of content in a visually appealing and organized manner.
+            The Card component is a versatile and reusable UI component that displays content within a card-like
+            container. It can be used to display images, text, and other types of content in a visually appealing and
+            organized manner.
           </p>
 
           <code-showcase
@@ -48,10 +50,10 @@ export class ButtonPage extends Component {
               className="max-w-[22rem] mx-auto"
               title="Card title"
               footerInfo="Last updated 3 mins ago"
-              img="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg">
+              img="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg"
+            >
               <p slot="body">
-                Some quick example text to build on the card title and make up the
-                bulk of the card's content.
+                Some quick example text to build on the card title and make up the bulk of the card's content.
               </p>
               <div slot="footer">
                 <o-button class="mr-5">Home</o-button>

diff --git a/packages/omiu/src/components/card/api.md b/packages/omiu/src/components/card/api.md
@@ -1,32 +1,31 @@
 ## Card Props
 
-| Name        | Type   | Default | Description                                                  |
-| ----------- | ------ | ------- | ------------------------------------------------------------ |
-| `img`       | String | `null`  | The image source URL to be displayed in the card.            |
-| `title`     | String | `null`  | The title text to be displayed in the card.                  |
-| `footerInfo`| String | `null`  | The footer information text to be displayed at the bottom of the card. |
-| `className` | String | `null`  | Additional CSS class names to be applied to the card component. |
+| Name         | Type   | Default | Description                                                            |
+| ------------ | ------ | ------- | ---------------------------------------------------------------------- |
+| `img`        | String | `null`  | The image source URL to be displayed in the card.                      |
+| `title`      | String | `null`  | The title text to be displayed in the card.                            |
+| `footerInfo` | String | `null`  | The footer information text to be displayed at the bottom of the card. |
+| `className`  | String | `null`  | Additional CSS class names to be applied to the card component.        |
 
 ## Card Slots
 
-| Name    | Description                                                  |
-| ------- | ------------------------------------------------------------ |
-| `body`  | The body content to be displayed in the card.                |
-| `footer`| The footer content to be displayed in the card.              |
+| Name     | Description                                     |
+| -------- | ----------------------------------------------- |
+| `body`   | The body content to be displayed in the card.   |
+| `footer` | The footer content to be displayed in the card. |
 
 ## Card 属性
 
-| 名称          | 类型   | 默认值  | 描述                                       |
-| ------------- | ------ | ------- | ------------------------------------------ |
-| `img`         | 字符串 | `null`  | 要在卡片中显示的图像源URL。                |
-| `title`       | 字符串 | `null`  | 要在卡片中显示的标题文本。                  |
-| `footerInfo`  | 字符串 | `null`  | 要在卡片底部显示的页脚信息文本。            |
-| `className`   | 字符串 | `null`  | 要应用于卡片组件的附加CSS类名。             |
+| 名称         | 类型   | 默认值 | 描述                             |
+| ------------ | ------ | ------ | -------------------------------- |
+| `img`        | 字符串 | `null` | 要在卡片中显示的图像源URL。      |
+| `title`      | 字符串 | `null` | 要在卡片中显示的标题文本。       |
+| `footerInfo` | 字符串 | `null` | 要在卡片底部显示的页脚信息文本。 |
+| `className`  | 字符串 | `null` | 要应用于卡片组件的附加CSS类名。  |
 
 ## Card 插槽
 
-| Name    | Description                                                  |
-| ------- | ------------------------------------------------------------ |
-| `body`  | 要在卡片中显示的正文内容。                                |
-| `footer`| 要在卡片中显示的页脚内容。                                |
-
+| Name     | Description                |
+| -------- | -------------------------- |
+| `body`   | 要在卡片中显示的正文内容。 |
+| `footer` | 要在卡片中显示的页脚内容。 |
diff --git a/packages/omiu/src/components/card/card.tsx b/packages/omiu/src/components/card/card.tsx
@@ -14,32 +14,25 @@ export class Button extends Component {
   render(props) {
     return (
       <div
-        class={classNames('block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700', props.className)}>
+        class={classNames(
+          'block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700',
+          props.className,
+        )}
+      >
         <div class="relative overflow-hidden bg-cover bg-no-repeat">
-         {props.img &&  <img
-            class="rounded-t-lg"
-            src={props.img}
-            alt="" /> }
+          {props.img && <img class="rounded-t-lg" src={props.img} alt="" />}
         </div>
         <div class="p-6">
-          <h5
-            class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
-            {props.title}
-          </h5>
-          <slot name="body" class="block mb-4 text-base text-neutral-600 dark:text-neutral-200">
-          </slot>
-          {props.footerInfo && <p class="text-base text-neutral-600 dark:text-neutral-200">
-            <small class="text-neutral-500 dark:text-neutral-400">{props.footerInfo}</small>
-          </p>}
-          <slot name="footer" class="mt-4 block">
-
-          </slot>
-
+          <h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">{props.title}</h5>
+          <slot name="body" class="block mb-4 text-base text-neutral-600 dark:text-neutral-200"></slot>
+          {props.footerInfo && (
+            <p class="text-base text-neutral-600 dark:text-neutral-200">
+              <small class="text-neutral-500 dark:text-neutral-400">{props.footerInfo}</small>
+            </p>
+          )}
+          <slot name="footer" class="mt-4 block"></slot>
         </div>
       </div>
     )
   }
 }
-
-
-
diff --git a/packages/omiu/src/components/swiper/SwiperPage.tsx b/packages/omiu/src/components/swiper/SwiperPage.tsx
@@ -53,22 +53,7 @@ export class SwiperPage extends Component {
   </o-accordion-item>
 </o-accordion>`}
           >
-            <o-accordion actives={['b']} onChange={this.onChange}>
-              <o-accordion-item name="a" title="title a">
-                <div>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-                  blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-                  malesuada lacus ex, sit amet blandit leo lobortis eget.
-                </div>
-              </o-accordion-item>
-              <o-accordion-item name="b" title="title b">
-                <div>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-                  blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-                  malesuada lacus ex, sit amet blandit leo lobortis eget.
-                </div>
-              </o-accordion-item>
-            </o-accordion>
+            <o-swiper actives={['b']} onChange={this.onChange}></o-swiper>
           </code-showcase>
         </section>
       </div>