@tendaui/components 1.2.4 → 1.3.1

package/_util/scroll.ts

@@ -0,0 +1,9 @@
+/**
+ * 检查节点是否溢出
+ * @param node 目标节点
+ * @returns 是否溢出
+ */
+export function isNodeOverflow(node: HTMLElement): boolean {
+  if (!node) return false;
+  return node.scrollWidth > node.clientWidth;
+}

package/alert/_example/base.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Alert } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <Alert theme="success" message="这是一条成功的消息提示" />
+      <Alert theme="info" message="这是一条普通的消息提示" />
+      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="error" message="高危操作/出错信息提示" />
+    </div>
+  );
+}

package/alert/_example/collapse.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Alert } from "@tendaui/react";
+
+export default function Collapse() {
+  const message = [
+    "1.这是一条普通的消息提示描述，",
+    "2.这是一条普通的消息提示描述，",
+    "3.这是一条普通的消息提示描述，",
+    "4.这是一条普通的消息提示描述，",
+    "5.这是一条普通的消息提示描述，"
+  ];
+  return (
+    <Alert message={message} maxLine={2} closeBtn />
+  );
+}

package/badge/_example/base.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <Badge count={2}>
+      <Button>按钮</Button>
+    </Badge>
+  );
+}

package/badge/_example/count.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Count() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={1}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={16}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={99}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={100}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/custom-color.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function CustomColor() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} color="var(--td-success-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} color="var(--td-warning-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} color="var(--td-brand-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="new" color="#6366f1">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} color="var(--td-success-color)">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/dot.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Dot() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge dot count={1}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1}>
+        <Button>消息</Button>
+      </Badge>
+      <Badge dot>
+        <span style={{ fontSize: "16px" }}>通知</span>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/max-count.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function MaxCount() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={100} maxCount={99}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={1000} maxCount={999}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={50} maxCount={20}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/offset.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Offset() {
+  return (
+    <div style={{ display: "flex", gap: "40px", alignItems: "center" }}>
+      <Badge count={8}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[-5, 5]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[5, -5]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} offset={[-10, 10]}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/shape.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Shape() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} shape="circle">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} shape="circle">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="new" shape="round">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/show-zero.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function ShowZero() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={0}>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={0} showZero>
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/size.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function Size() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={8} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={8} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count={88} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} size="medium">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge dot count={1} size="small">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/standalone.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Badge } from "@tendaui/react";
+
+export default function Standalone() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Badge count={8} />
+      <Badge count={88} />
+      <Badge count={888} />
+      <Badge count="new" shape="round" />
+      <Badge dot count={1} />
+    </div>
+  );
+}

package/badge/_example/text-count.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+const badgeBlockStyle: React.CSSProperties = {
+  width: "40px",
+  height: "40px",
+  background: "#EEEEEE",
+  border: "1px solid #DCDCDC",
+  borderRadius: "3px"
+};
+
+export default function TextCount() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count="new">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="hot">
+        <div style={badgeBlockStyle}></div>
+      </Badge>
+      <Badge count="NEW">
+        <Button>新品</Button>
+      </Badge>
+    </div>
+  );
+}

package/badge/_example/with-button.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Badge, Button } from "@tendaui/react";
+
+export default function WithButton() {
+  return (
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
+      <Badge count={5}>
+        <Button>消息</Button>
+      </Badge>
+      <Badge count={12}>
+        <Button theme="primary">通知</Button>
+      </Badge>
+      <Badge dot count={1}>
+        <Button variant="outline">提醒</Button>
+      </Badge>
+      <Badge count="new" shape="round" color="var(--td-success-color)">
+        <Button theme="success" variant="outline">
+          新功能
+        </Button>
+      </Badge>
+    </div>
+  );
+}

package/button/_example/block.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Block() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px", width: "300px" }}>
+      <Button block theme="primary">
+        主要按钮
+      </Button>
+      <Button block variant="outline" theme="primary">
+        描边按钮
+      </Button>
+      <Button block variant="dashed">
+        虚线按钮
+      </Button>
+    </div>
+  );
+}

package/button/_example/disabled.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Disabled() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button disabled>默认禁用</Button>
+      <Button disabled theme="primary">
+        主要禁用
+      </Button>
+      <Button disabled variant="outline" theme="primary">
+        描边禁用
+      </Button>
+      <Button disabled variant="dashed" theme="primary">
+        虚线禁用
+      </Button>
+      <Button disabled variant="text" theme="primary">
+        文字禁用
+      </Button>
+    </div>
+  );
+}

package/button/_example/ghost.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Ghost() {
+  return (
+    <div style={{ display: "flex", gap: "12px", padding: "24px", flexWrap: "wrap" }}>
+      <Button ghost theme="primary">
+        主要
+      </Button>
+      <Button ghost theme="success">
+        成功
+      </Button>
+      <Button ghost theme="warning">
+        警告
+      </Button>
+      <Button ghost theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/link.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Link() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button href="https://www.example.com" target="_blank" theme="primary">
+        跳转链接
+      </Button>
+      <Button href="https://www.example.com" target="_blank" variant="text" theme="primary">
+        文字链接
+      </Button>
+    </div>
+  );
+}

package/button/_example/loading.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Loading() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button loading>加载中</Button>
+      <Button loading theme="primary">
+        加载中
+      </Button>
+      <Button loading variant="outline" theme="primary">
+        加载中
+      </Button>
+      <Button loading variant="dashed" theme="success">
+        加载中
+      </Button>
+    </div>
+  );
+}

package/button/_example/shape.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+import { IconPlus } from "@tendaui/icons";
+
+export default function Shape() {
+  return (
+    <div style={{ display: "flex", gap: "12px", alignItems: "center", flexWrap: "wrap" }}>
+      <Button shape="rectangle" theme="primary">
+        长方形
+      </Button>
+      <Button shape="round" theme="primary">
+        圆角
+      </Button>
+      <Button shape="square" theme="primary" icon={<IconPlus />} />
+      <Button shape="circle" theme="primary" icon={<IconPlus />} />
+    </div>
+  );
+}

package/button/_example/size.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Size() {
+  return (
+    <div style={{ display: "flex", gap: "12px", alignItems: "center", flexWrap: "wrap" }}>
+      <Button size="small" theme="primary">
+        小按钮
+      </Button>
+      <Button size="medium" theme="primary">
+        中按钮
+      </Button>
+      <Button size="large" theme="primary">
+        大按钮
+      </Button>
+    </div>
+  );
+}

package/button/_example/suffix.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+import { IconDownload, IconSearch } from "@tendaui/icons";
+
+export default function Suffix() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button suffix={<IconDownload />} theme="primary">
+        下载
+      </Button>
+      <Button icon={<IconSearch />} suffix={<IconDownload />} theme="primary">
+        搜索并下载
+      </Button>
+    </div>
+  );
+}

package/button/_example/theme.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Theme() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button theme="default">默认</Button>
+      <Button theme="primary">主要</Button>
+      <Button theme="success">成功</Button>
+      <Button theme="warning">警告</Button>
+      <Button theme="danger">危险</Button>
+    </div>
+  );
+}

package/button/_example/variant-base.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantBase() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="base" theme="default">
+        默认
+      </Button>
+      <Button variant="base" theme="primary">
+        主要
+      </Button>
+      <Button variant="base" theme="success">
+        成功
+      </Button>
+      <Button variant="base" theme="warning">
+        警告
+      </Button>
+      <Button variant="base" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-dashed.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantDashed() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="dashed" theme="default">
+        默认
+      </Button>
+      <Button variant="dashed" theme="primary">
+        主要
+      </Button>
+      <Button variant="dashed" theme="success">
+        成功
+      </Button>
+      <Button variant="dashed" theme="warning">
+        警告
+      </Button>
+      <Button variant="dashed" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-outline.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantOutline() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="outline" theme="default">
+        默认
+      </Button>
+      <Button variant="outline" theme="primary">
+        主要
+      </Button>
+      <Button variant="outline" theme="success">
+        成功
+      </Button>
+      <Button variant="outline" theme="warning">
+        警告
+      </Button>
+      <Button variant="outline" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/button/_example/variant-text.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function VariantText() {
+  return (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      <Button variant="text" theme="default">
+        默认
+      </Button>
+      <Button variant="text" theme="primary">
+        主要
+      </Button>
+      <Button variant="text" theme="success">
+        成功
+      </Button>
+      <Button variant="text" theme="warning">
+        警告
+      </Button>
+      <Button variant="text" theme="danger">
+        危险
+      </Button>
+    </div>
+  );
+}

package/checkbox/_example/base.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <Checkbox>复选框</Checkbox>
+  );
+}

package/checkbox/_example/controlled.tsx

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+import { Checkbox } from "@tendaui/react";
+
+export default function Controlled() {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Checkbox checked={checked} onChange={(val) => setChecked(val)}>
+      受控复选框（点击切换）
+    </Checkbox>
+  );
+}