关于ra组件
用于反应-admin的开源组件.
- 一个像菜单结构的树 反应-admin,
TreeMenu - 在文本输入中验证 JSON 很容易使用
JsonInput。 。 。 . - JSON物体现在看起来很漂亮
JsonField。 。 。 . - 数据可以使用
TrimField在数据网等显示时. - 校验电子邮件, 使用
EmailInput。 。 。 . - 校验 URL, 限制一组特定域
URLInput。 。 。 . - 用于更新记录中值的按钮( 如: 批准/ 重试等)
UpdateButton。 。 。 . - 验证电话号码,限制特定国家使用
PhoneInput
支持的反应-admin版本 :
反应- admin 4. x
安装
使用 npm 安装 : npm install --save @bb-tech/ra-components
基本用途
用于 ra-components 在反应admin应用程序中,将必要的软件包导入到您的js文件中.
import {
TreeMenu,
JsonInput,
JsonField,
TrimField,
} from "@bb-tech/ra-components";
- 现在可以使用代码中的控制了.
<JsonInput source="config" label="JSON Config" />
树梅努
用于 ra-treemenu 在反应admin应用程序中:
- 创建父资源( 非路径), 选项道具中有以下密钥 :
isMenuParent = true。记得通过强制性name此资源中的道具, 因为它将被用于将孩子资源映射到树上指定的父目录 .
<Resource name="users" options={{ label: "Users", isMenuParent: true }} />
- 现在通过绘制
menuParent选项options给name用于您父资源.
<Resource name="posts" options={{ label: "Posts", menuParent: "users" }} />
这将给您一个菜单结构如下:
以下是将菜单组织成树状结构的简单例子:
// In App.js
import * as React from "react";
import { Admin, Resource, Layout } from "react-admin";
/* Import TreeMenu from the package */
import TreeMenu from "@bb-tech/ra-components";
const App = () => (
<Admin layout={(props) => <Layout {...props} menu={TreeMenu} />}>
{/* Dummy parent resource with isMenuParent options as true */}
<Resource name="users" options={{ label: "Users", isMenuParent: true }} />
{/* Children menu items under parent */}
<Resource name="posts" options={{ label: "Posts", menuParent: "users" }} />
<Resource
name="comments"
options={{ label: "Comments", menuParent: "users" }}
/>
{/* Dummy parent resource with isMenuParent options as true */}
<Resource name="groups" options={{ label: "Groups", isMenuParent: true }} />
{/* Children menu items under parent */}
<Resource
name="members"
options={{ label: "Members", menuParent: "groups" }}
/>
</Admin>
);
export default App;
默认, TreeMenu 菜单标题使用当前主题的主要和次要颜色。 它可以通过标记关闭 setMenuColors 道具是虚假的。 另外,Dashboard菜单标题是"Dashboard". 可以使用 dashboardlabel 道具 (英语).
TreeMenu.defaultProps.dashboardlabel = translate("resources.dashboard.name");
TreeMenu.defaultProps.setMenuColors = false;
<Layout {...props} menu={TreeMenu} />;
Json 输入
JsonInput 如果输入的值是否为 JSON ,则验证 .
如果输入的值不是无效的 JSON, JsonInput 将投出一个错误.
默认错误消息是 : Invalid JSON 并且可以使用 errortext 道具 (英语).
<JsonInput source="config" label="JSON Config" errortext="Enter a valid JSON" />
或使用翻译函数 :
<JsonInput
source="config"
label={translate("resources.resource_name.fields.config")}
errortext={translate("myroot.validate.json")}
/>
默认, JsonInput 解析并返回输入的字符串为对象。 相反,要直接发送字符串,请通过 parse 作为道具 false
<JsonInput source="config" label="JSON Config" parse={false} />
杰森·菲尔德
您的 JSON 可以使用树状结构查看 JsonField 。 。 。 .
<JsonField source="config" label="JSON Config" />
可以将多个源作为逗号所分解的字符串发送.
如果您发送消息源为 ALL, JSON 树将会从所有记录的值中创建.
<JsonField source="config1,config2" label="JSON Config" />
也可以直接设置JSON文本而不用源道克.
<JsonField json={jsonobj} label="JSON Object" />
若为 treeview 实值 false, JSON 被视为文本,即被调整后可以添加足够的空格使其适合屏幕.
<JsonField json={jsonobj} label="JSON Object" treeview={false} />
而且,如果 togglelabel 中,将另外显示一个按钮以切换到 tree 财务报告和审定财务报表 text。 。 。 .
<JsonField json={jsonobj} label="JSON Object" togglelabel="Toggle-View" />
若为 expandlabel 财务报告和审定财务报表 collapselabel 设置中,在 expand 财务报告和审定财务报表 collapse。 。 。 .
<JsonField
json={jsonobj}
label="JSON Object"
expandlabel="Expand"
collapselabel="Collapse"
/>
曲线字段
任意 TextField 更多字符可使用 TrimField。 。 。 .
<TrimField source="field" label="Trimmed Field" />
默认情况下, 将值调整为 30 个字符和附件... 到 .
你可以定制它.
<TrimField source="field" label="Trimmed Field" limit={40} trimstr="...." />
电子邮件输入
EmailInput 用于验证输入的值是否为电子邮件.
<EmailInput source="email" label="Email Address" />
您可以将电子邮件限制在特定域上 .
<EmailInput source="email" domains={["yourdomain.com"]} />
MULTIPLE允许它取取逗号分离的电子邮件地址. 或者您可以指定分隔符 .
<EmailInput
source="email"
domains={["yourdomain.com"]}
type={EmailTypes.MULTIPLE}
splitchar=";"
/>
如果电子邮件地址无效, 您可以使用 errortext 道具 (英语).
说明 EmailTypes.ARRAY
- 如果您想获得电子邮件地址, 请通过类型为
EmailTypes.ARRAY。 。 。 . - 默认情况下
EmailInput组件被包裹在屏幕上. - 你可以通过
wrap={false}获取每个EmailInput一个在另一个下面. - “ 电子邮件” 是给阵列的默认标签 。 使用
grouplabel{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}请重覆这个文件 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}.
URL 输入
URLInput 如果输入的值是有效的URL,则用于验证.
<URLInput source="url" label="URL" />
您可以将 URL 限制在特定的域上 .
<URLInput source="url" domains={["yourdomain.com"]} />
默认情况下, URL 输入只允许 https您可以扩展它用于 http 或者说 ftp。 。 。 .
<URLInput
source="url"
domains={["yourdomain.com"]}
httpAllowed={true}
ftpAllowed={true}
/>
如果您想要在没有 http 和域名的情况下捕获 API 端点, 您可以使用 APIEndPoint。 。 。 .
APIENDPoint 允许任何字符串从 /。 。 。 .
<URLInput source="url" APIEndPoint={true} />
MULTIPLE允许它取取逗号分离的urls. 或者您可以指定分隔符 .
<URLInput
source="url"
domains={["yourdomain.com"]}
type={URLTypes.MULTIPLE}
splitchar=";"
/>
如果 URL 无效, 您可以使用 errortext 道具 (英语).
电话输入
PhoneInput 用于验证输入的数值是否为有效电话号码.
<PhoneInput source="phone" label="Phone Number" />
您可使用 country 道具 (英语). 这里应该使用两个字母ISO代码.
<PhoneInput source="phone" label="Phone Number" country="IN" />
MULTIPLE允许它取取逗号分离的电话号码. 或者您可以指定分隔符 .
<PhoneInput
source="phone"
label="Phone Number"
type={PhoneTypes.MULTIPLE}
splitchar=";"
/>
如果电话号码无效, 您可以使用 errortext 道具 (英语).
说明 PhoneTypes.ARRAY
- 如果你想得到数组电话号码,请通过类型为
PhoneTypes.ARRAY。 。 。 . - 默认情况下
PhoneInput组件被包裹在屏幕上. - 你可以通过
wrap作为false获取每个PhoneInput一个在另一个下面. Phone Numbers是给数组的默认标签。 使用grouplabel{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}请重覆这个文件 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}.
更新按钮
您可能想要添加一个按钮来更新记录中的特定一栏 . 示例:您可以添加一个按钮来批准一个帖子.
<UpdateButton resource="posts" label="Approve" source="is_approved" />
在上述例子中, is_approved 栏内 posts,将更新到 true。 。 。 .
您可以将值道具传递给源代码更新到特定值,而不是 true。 。 。 .
<UpdateButton
resource="posts"
label="Approve"
source="post_status"
value="APPROVED"
/>
也可以通过在数据中传递json来更新两个或两个以上的列. 例:批准该员额并更新核定地位
const data = { is_approved: true, post_status: "APPROVED" };
<UpdateButton resource="posts" label="Approve" data={data} />;
注:可以发送来源或数据。 如果有源,则数据被忽略.
默认, UpdateButton 合并未更新的数据并更新数据,发送整个对象。 如果您的 API 只期望更新数据, 您可以使用合并道具关闭 .
const data = { is_approved: true, post_status: "APPROVED" };
<UpdateButton resource="posts" label="Approve" data={data} merge={false} />;