@tendaui/components 1.2.4 → 1.3.0

package/select/_example/creatable.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const CreatableExample = () => {
+  const [value, setValue] = useState<string[]>([]);
+  const [options, setOptions] = useState([
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Angular", value: "angular" }
+  ]);
+
+  const handleCreate = (val: string | number) => {
+    const newOption = { label: String(val), value: String(val) };
+    setOptions([...options, newOption]);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string[])}
+        options={options}
+        placeholder="输入并回车创建新选项"
+        multiple
+        filterable
+        creatable
+        clearable
+        onCreate={handleCreate}
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>提示：输入新内容后按回车可创建新选项</div>
+    </div>
+  );
+};
+
+export default CreatableExample;

package/select/_example/custom-content.tsx

@@ -0,0 +1,26 @@
+import { Select } from "@tendaui/react";
+import React from "react";
+
+const customOptions = [
+  { label: "架构云", value: "1", content: <span style={{ color: "var(--td-brand-color)" }}>架构云（推荐）</span> },
+  {
+    label: "大数据",
+    value: "2",
+    content: (
+      <span>
+        大数据 <span style={{ color: "#999", fontSize: "12px" }}>- 企业版</span>
+      </span>
+    )
+  },
+  {
+    label: "人工智能",
+    value: "3",
+    content: <span style={{ color: "var(--td-success-color)" }}>人工智能（新）</span>
+  }
+];
+
+const CustomContentExample = () => (
+  <Select options={customOptions} placeholder="选项支持自定义内容" style={{ width: "300px" }} />
+);
+
+export default CustomContentExample;

package/select/_example/default.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const DefaultExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string)}
+        options={basicOptions}
+        placeholder="请选择"
+        clearable
+        style={{ width: "300px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>选中值：{value || "(空)"}</div>
+    </div>
+  );
+};
+
+export default DefaultExample;

package/select/_example/disabled.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const DisabledExample = () => (
+  <div style={{ display: "flex", gap: "16px" }}>
+    <Select options={basicOptions} placeholder="正常状态" style={{ width: "200px" }} />
+    <Select options={basicOptions} placeholder="禁用状态" disabled defaultValue="1" style={{ width: "200px" }} />
+    <Select options={basicOptions} placeholder="只读状态" readonly defaultValue="2" style={{ width: "200px" }} />
+  </div>
+);
+
+export default DisabledExample;

package/select/_example/filterable.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const FilterableExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Select
+      value={value}
+      onChange={(val) => setValue(val as string)}
+      options={basicOptions}
+      placeholder="请输入关键词搜索"
+      filterable
+      clearable
+      style={{ width: "300px" }}
+    />
+  );
+};
+
+export default FilterableExample;

package/select/_example/group-options.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const groupOptions = [
+  {
+    group: "华北",
+    children: [
+      { label: "北京", value: "beijing" },
+      { label: "天津", value: "tianjin" }
+    ]
+  },
+  {
+    group: "华东",
+    children: [
+      { label: "上海", value: "shanghai" },
+      { label: "南京", value: "nanjing" },
+      { label: "杭州", value: "hangzhou" }
+    ]
+  },
+  {
+    group: "华南",
+    children: [
+      { label: "广州", value: "guangzhou" },
+      { label: "深圳", value: "shenzhen" }
+    ]
+  }
+];
+
+const GroupExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Select
+      value={value}
+      onChange={(val) => setValue(val as string)}
+      options={groupOptions}
+      placeholder="请选择城市"
+      filterable
+      clearable
+      style={{ width: "300px" }}
+    />
+  );
+};
+
+export default GroupExample;

package/select/_example/label-suffix.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const LabelSuffixExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <Select label="城市：" options={basicOptions} placeholder="请选择" style={{ width: "350px" }} />
+    <Select
+      suffix={<span style={{ color: "#999" }}>个</span>}
+      options={basicOptions}
+      placeholder="请选择"
+      style={{ width: "350px" }}
+    />
+  </div>
+);
+
+export default LabelSuffixExample;

package/select/_example/loading.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const LoadingExample = () => (
+  <div style={{ display: "flex", gap: "16px" }}>
+    <Select options={basicOptions} placeholder="正常" style={{ width: "200px" }} />
+    <Select options={[]} placeholder="加载中..." loading style={{ width: "200px" }} />
+  </div>
+);
+
+export default LoadingExample;

package/select/_example/multiple.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Select } from "@tendaui/react";
+
+const MultipleExample = () => {
+  const [value, setValue] = useState<string[]>(["1", "3"]);
+  const options = [
+    { label: "全选", checkAll: true },
+    { label: "架构云", value: "1" },
+    { label: "大数据", value: "2" },
+    { label: "区块链", value: "3" },
+    { label: "物联网", value: "4", disabled: true },
+    { label: "人工智能", value: "5" }
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Select
+        value={value}
+        onChange={(val) => setValue(val as string[])}
+        options={options}
+        placeholder="请选择多个选项"
+        multiple
+        filterable
+        clearable
+        style={{ width: "400px" }}
+      />
+      <div style={{ color: "#666", fontSize: "12px" }}>选中值：{JSON.stringify(value)}</div>
+    </div>
+  );
+};
+
+export default MultipleExample;

package/select/_example/sizes.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const SizesExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    <Select size="small" options={basicOptions} placeholder="小尺寸" style={{ width: "300px" }} />
+    <Select size="medium" options={basicOptions} placeholder="中尺寸（默认）" style={{ width: "300px" }} />
+    <Select size="large" options={basicOptions} placeholder="大尺寸" style={{ width: "300px" }} />
+  </div>
+);
+
+export default SizesExample;

package/select/_example/status.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Select } from "@tendaui/react";
+
+const basicOptions = [
+  { label: "架构云", value: "1", title: "架构云选项" },
+  { label: "大数据", value: "2" },
+  { label: "区块链", value: "3" },
+  { label: "物联网", value: "4", disabled: true },
+  { label: "人工智能", value: "5" }
+];
+
+const StatusExample = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "24px", margin: "8px 0" }}>
+    <Select
+      status="default"
+      options={basicOptions}
+      placeholder="默认状态"
+      tips="这是一条提示"
+      style={{ width: "300px" }}
+    />
+    <Select status="success" options={basicOptions} placeholder="成功状态" tips="校验通过" style={{ width: "300px" }} />
+    <Select status="warning" options={basicOptions} placeholder="警告状态" tips="请注意" style={{ width: "300px" }} />
+    <Select status="error" options={basicOptions} placeholder="错误状态" tips="输入有误" style={{ width: "300px" }} />
+  </div>
+);
+
+export default StatusExample;