@2dine/framework-ui 中文文档教程
这是用于反应的 Tailwind CSS 包装器。
Getting Started
首先,运行开发服务器:
npm install @2dine/framework-ui
# or
yarn add @2dine/framework-ui
Usage Sidebar
这是一个让您入门的快速示例,这就是您所需要的:
import { Sidebar } from "../src/components";
import "../styles/globals.css";
function App({ Component, pageProps }) {
const primaryLinks = [
{
href: `/`,
label: "Inicio",
// exact: true,
// icon: (
// <Home className="mr-4 h-6 w-6 text-primary-200 group-hover:text-primary-200 group-focus:text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/contracts`,
label: "Contratos",
// exact: true,
// icon: (
// <Scale className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/consumptions`,
label: "Lecturas",
// exact: true,
// icon: (
// <Calculator className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/payments`,
label: "Ingresos",
// exact: true,
// icon: (
// <Cash className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
];
const secondaryLinks = [
{
href: `/settings`,
label: "Configuración",
// icon: (
// <Cog className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{ href: `/help`, label: "Ayuda" },
{
href: `/about`,
label: "Acerca de",
// icon: (
// <ShieldCheck className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
];
return (
<div className="relative h-screen flex overflow-hidden bg-gray-100">
<Sidebar
logo={{
src:
"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg",
alt: "Workflow",
}}
withHeader
primaryLinks={primaryLinks}
secondaryLinks={secondaryLinks}
footer={
<div className="flex-shrink-0 flex border-t border-primary-800 p-4">
<a href="#" className="flex-shrink-0 group block">
<div className="flex items-center">
<div>
<img
className="inline-block h-9 w-9 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-base md:text-sm font-medium text-white">
Tom Cook
</p>
<p className="text-sm md:text-xs font-medium text-primary-200 group-hover:text-white">
View profile
</p>
</div>
</div>
</a>
</div>
}
/>
<div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
<main className="flex-1 relative pb-8 z-0 overflow-y-auto">
<Component {...pageProps} />
</main>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
是的,这确实是您入门所需要的全部。
Usage DynamoFilter
这是一个帮助您入门的快速示例,这就是您所需要的:
import { DynamoFilter } from "../src/components";
const onResolveOptions = () => {
return new Promise((resolve) => {
setTimeout(
() =>
resolve([
{ label: "Opción 1", value: "key_1" },
{ label: "Opción 2", value: "key_2" },
]),
3000
);
});
};
return (
<div className="relative h-screen flex overflow-hidden bg-gray-100">
<DynamoFilter
fields={{
serie: {
label: "Serie",
inputType: "input",
operand: "eq",
},
derivativeSerie: {
label: "Derivada",
placeholder: "Ingresa el número de serie",
inputType: "input",
operand: "eq",
},
rutaID: {
label: "Ruta",
inputType: "select",
operand: "eq",
placeholder: "Selecciona una opción",
onResolveOptions, /* Regresa un arreglo de options */
},
consumo: {
label: "Consumo",
inputType: "range",
type: "volume",
max: 10000,
step: 100,
dependsOn: {
availableRange: {
inputType: "switch",
label: "Habilitar rango",
description: "",
parseValue: (value) => value && "between",
},
},
},
createdAt: {
label: "Fecha",
inputType: "date",
dependsOn: {
dateType: {
inputType: "select",
options: [
{ label: "Antes de", value: "lt" },
{ label: "Despues de", value: "gt" },
{ label: "Entre", value: "between" },
],
label: "Rango de fecha",
placeholder: "Todos",
},
},
},
}}
initialValues={{
serie: "",
derivativeSerie: "",
status: "",
consumo: [0, 1000000],
availableRange: false,
createdAt: new Date().toISOString(),
}}
onCancel={() => }
onSubmit={(values) => console.log("values", values)}
/>
<div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
<main className="flex-1 relative pb-8 z-0 overflow-y-auto">
<Component {...pageProps} />
</main>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
是的,这确实是您入门所需的全部。
This is a Tailwind CSS wrapper for react.
Getting Started
First, run the development server:
npm install @2dine/framework-ui
# or
yarn add @2dine/framework-ui
Usage Sidebar
Here is a quick example to get you started, it's all you need:
import { Sidebar } from "../src/components";
import "../styles/globals.css";
function App({ Component, pageProps }) {
const primaryLinks = [
{
href: `/`,
label: "Inicio",
// exact: true,
// icon: (
// <Home className="mr-4 h-6 w-6 text-primary-200 group-hover:text-primary-200 group-focus:text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/contracts`,
label: "Contratos",
// exact: true,
// icon: (
// <Scale className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/consumptions`,
label: "Lecturas",
// exact: true,
// icon: (
// <Calculator className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{
href: `/payments`,
label: "Ingresos",
// exact: true,
// icon: (
// <Cash className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
];
const secondaryLinks = [
{
href: `/settings`,
label: "Configuración",
// icon: (
// <Cog className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
{ href: `/help`, label: "Ayuda" },
{
href: `/about`,
label: "Acerca de",
// icon: (
// <ShieldCheck className="mr-4 text-primary-200 transition ease-in-out duration-150" />
// ),
},
];
return (
<div className="relative h-screen flex overflow-hidden bg-gray-100">
<Sidebar
logo={{
src:
"https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg",
alt: "Workflow",
}}
withHeader
primaryLinks={primaryLinks}
secondaryLinks={secondaryLinks}
footer={
<div className="flex-shrink-0 flex border-t border-primary-800 p-4">
<a href="#" className="flex-shrink-0 group block">
<div className="flex items-center">
<div>
<img
className="inline-block h-9 w-9 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<p className="text-base md:text-sm font-medium text-white">
Tom Cook
</p>
<p className="text-sm md:text-xs font-medium text-primary-200 group-hover:text-white">
View profile
</p>
</div>
</div>
</a>
</div>
}
/>
<div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
<main className="flex-1 relative pb-8 z-0 overflow-y-auto">
<Component {...pageProps} />
</main>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
Yes, it's really all you need to get started.
Usage DynamoFilter
Here is a quick example to get you started, it's all you need:
import { DynamoFilter } from "../src/components";
const onResolveOptions = () => {
return new Promise((resolve) => {
setTimeout(
() =>
resolve([
{ label: "Opción 1", value: "key_1" },
{ label: "Opción 2", value: "key_2" },
]),
3000
);
});
};
return (
<div className="relative h-screen flex overflow-hidden bg-gray-100">
<DynamoFilter
fields={{
serie: {
label: "Serie",
inputType: "input",
operand: "eq",
},
derivativeSerie: {
label: "Derivada",
placeholder: "Ingresa el número de serie",
inputType: "input",
operand: "eq",
},
rutaID: {
label: "Ruta",
inputType: "select",
operand: "eq",
placeholder: "Selecciona una opción",
onResolveOptions, /* Regresa un arreglo de options */
},
consumo: {
label: "Consumo",
inputType: "range",
type: "volume",
max: 10000,
step: 100,
dependsOn: {
availableRange: {
inputType: "switch",
label: "Habilitar rango",
description: "",
parseValue: (value) => value && "between",
},
},
},
createdAt: {
label: "Fecha",
inputType: "date",
dependsOn: {
dateType: {
inputType: "select",
options: [
{ label: "Antes de", value: "lt" },
{ label: "Despues de", value: "gt" },
{ label: "Entre", value: "between" },
],
label: "Rango de fecha",
placeholder: "Todos",
},
},
},
}}
initialValues={{
serie: "",
derivativeSerie: "",
status: "",
consumo: [0, 1000000],
availableRange: false,
createdAt: new Date().toISOString(),
}}
onCancel={() => }
onSubmit={(values) => console.log("values", values)}
/>
<div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
<main className="flex-1 relative pb-8 z-0 overflow-y-auto">
<Component {...pageProps} />
</main>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
Yes, it's really all you need to get started.