feat: ✨ implement divider

packages/Divider/Divider.css

@@ -0,0 +1,57 @@
+.van-divider {
+  display: flex;
+  align-items: center;
+  border-style: solid;
+  border-width: 0;
+  margin: 16px 0;
+  margin: var(--divider-margin, 16px 0);
+  color: #969799;
+  color: var(--divider-text-color, #969799);
+  font-size: 14px;
+  font-size: var(--divider-font-size, 14px);
+  line-height: 24px;
+  line-height: var(--divider-line-height, 24px);
+  border-color: #ebedf0;
+  border-color: var(--divider-border-color, #ebedf0);
+}
+.van-divider::before,
+.van-divider::after {
+  display: block;
+  flex: 1;
+  box-sizing: border-box;
+  height: 1px;
+  border-color: inherit;
+  border-style: inherit;
+  border-width: 1px 0 0;
+}
+.van-divider::before {
+  content: '';
+}
+.van-divider--hairline::before,
+.van-divider--hairline::after {
+  transform: scaleY(0.5);
+}
+.van-divider--dashed {
+  border-style: dashed;
+}
+.van-divider--center::before,
+.van-divider--left::before,
+.van-divider--right::before {
+  margin-right: 16px;
+  margin-right: var(--divider-content-padding, 16px);
+}
+.van-divider--center::after,
+.van-divider--left::after,
+.van-divider--right::after {
+  content: '';
+  margin-left: 16px;
+  margin-left: var(--divider-content-padding, 16px);
+}
+.van-divider--left::before {
+  max-width: 10%;
+  max-width: var(--divider-content-left-width, 10%);
+}
+.van-divider--right::after {
+  max-width: 10%;
+  max-width: var(--divider-content-right-width, 10%);
+}

packages/Divider/Divider.tsx

@@ -0,0 +1,60 @@
+// packages
+import React, { FunctionComponent, CSSProperties } from 'react';
+import clsx from 'clsx';
+import { View } from 'remax/wechat';
+// internal
+import withDefaultProps from '../tools/with-default-props-advance';
+import './Divider.css';
+
+// 默认值填充属性
+interface NeutralDividerProps {
+  dashed: boolean;
+  hairline: boolean;
+}
+
+interface ExogenousDividerProps {
+  contentPostion?: 'left' | 'center' | 'right';
+  // 自定义样式
+  style?: CSSProperties;
+  // 容器类名，用以覆盖内部
+  className?: string;
+}
+
+type DividerProps = NeutralDividerProps & ExogenousDividerProps;
+
+const DefaultDividerProps: NeutralDividerProps = {
+  dashed: false,
+  hairline: false,
+};
+
+const Divider: FunctionComponent<DividerProps> = (props) => {
+  const {
+    style,
+    className,
+    dashed,
+    hairline,
+    contentPostion,
+    children,
+  } = props;
+  const classnames = {
+    container: clsx(
+      className,
+      'van-divider',
+      contentPostion && `van-divider--${contentPostion}`,
+      {
+        'van-divider--dashed': dashed,
+        'van-divider--hairline': hairline,
+      }
+    ),
+  };
+
+  return (
+    <View style={style} className={classnames.container}>
+      {children}
+    </View>
+  );
+};
+
+export default withDefaultProps<ExogenousDividerProps, NeutralDividerProps>(
+  DefaultDividerProps
+)(Divider);

packages/Divider/index.ts

@@ -0,0 +1,4 @@
+/**
+ * @description - nothing but export component
+ */
+export { default } from './Divider';

public/app.config.ts

@@ -2,6 +2,7 @@ import { AppConfig } from 'remax/wechat';
 
 const config: AppConfig = {
   pages: [
+    'pages/divider/index',
     'pages/grid/index',
     'pages/image/index',
     'pages/cell/index',

public/pages/divider/index.tsx

@@ -0,0 +1,40 @@
+// packages
+import * as React from 'react';
+import { View, Text } from 'remax/wechat';
+
+// internal
+import Divider from '../../../packages/Divider';
+
+export default () => {
+  return (
+    <View className="demo-block">
+      <Text className="demo-block__title">基础用法</Text>
+      <View className="demo-block__content">
+        <Divider />
+      </View>
+      <Text className="demo-block__title">使用 hairline</Text>
+      <View className="demo-block__content">
+        <Divider hairline />
+      </View>
+      <Text className="demo-block__title">虚线</Text>
+      <View className="demo-block__content">
+        <Divider dashed />
+      </View>
+      <Text className="demo-block__title">文本位置</Text>
+      <View className="demo-block__content">
+        <Divider contentPostion="left">（づ￣3￣）</Divider>
+        <Divider contentPostion="center">（づ￣3￣）</Divider>
+        <Divider contentPostion="right">（づ￣3￣）</Divider>
+      </View>
+      <Text className="demo-block__title">自定义样式</Text>
+      <View className="demo-block__content">
+        <Divider
+          style={{ color: '#1989fa', borderColor: '#1989fa', fontSize: '18px' }}
+          contentPostion="center"
+        >
+          （づ￣3￣）
+        </Divider>
+      </View>
+    </View>
+  );
+};