Empty component

README.md

@@ -89,7 +89,7 @@ const App = () => {
 - [ ] Collapse
 - [ ] CountDown
 - [ ] Divider
-- [ ] Empty
+- [x] Empty
 - [ ] ImagePreview
 - [ ] Lazyload
 - [ ] List

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant-react",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Lightweight Mobile UI Components built in React & Typescript, inspired by Vant: https://youzan.github.io/vant",
   "author": "mxdi9i7",
   "license": "MIT",

src/components/Empty/index.scss

@@ -1,11 +1,7 @@
-// @import '../../styles/colors.scss';
-// @import '../../styles/spacing.scss';
-// @import '../../styles/typography.scss';
-// @import '../../styles/opacity.scss';
 @import '../../styles/variables.scss';
+@import '../../styles/typography.scss';
 
-$baseClass: 'vant-button';
-
+$baseClass: 'vant-empty';
 
 .#{$baseClass} {
   display: flex;

src/components/Empty/index.stories.tsx

@@ -25,34 +25,36 @@ export const ImageType = () => {
 
   return (
     <div className='storybook__container empty'>
-      <Button
-        onClick={() => {
-          setShowType('error');
-        }}
-        text='Error'
-        type='primary'
-      />
-      <Button
-        onClick={() => {
-          setShowType('network');
-        }}
-        text='Network'
-        type='info'
-      />
-      <Button
-        onClick={() => {
-          setShowType('search');
-        }}
-        text='Search'
-        type='warning'
-      />
-      <Button
-        onClick={() => {
-          setShowType('custom');
-        }}
-        text='Custom'
-        type='danger'
-      />
+      <div>
+        <Button
+          onClick={() => {
+            setShowType('error');
+          }}
+          text='Error'
+          type='primary'
+        />
+        <Button
+          onClick={() => {
+            setShowType('network');
+          }}
+          text='Network'
+          type='info'
+        />
+        <Button
+          onClick={() => {
+            setShowType('search');
+          }}
+          text='Search'
+          type='warning'
+        />
+        <Button
+          onClick={() => {
+            setShowType('custom');
+          }}
+          text='Custom'
+          type='danger'
+        />
+      </div>
       {showType === 'error' && (
         <Empty image='error' description='description' />
       )}
@@ -78,7 +80,7 @@ export const CustomImage = () => (
   </div>
 );
 
-export const BottomContent = () => (
+export const CustomBottomContent = () => (
   <div className='storybook__container empty'>
     <Empty
       bottom={

src/components/Empty/index.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
-
 import classnames from '../../utils/classNames';
-
 import { Props } from './types';
-
 import './index.scss';
 import { Network } from './Network';
 
-const baseClass = 'vant-button';
+const baseClass = 'vant-empty';
 const PRESET_IMAGES = ['error', 'search', 'default'];
 
 // TODO: custom imageSize
-// TODO: bottom & image & description solts
+// TODO: bottom & image & description slots
 export default function Empty({
   description,
   image = 'default',

src/styles/stories.scss

@@ -62,6 +62,10 @@ body {
       height: 200px;
     }
   }
+
+  &.empty {
+    flex-direction: column;
+  }
 }
 .slider-container {
   display: flex;