slate/pages/_/system/card-tabs.js

204 lines
5.4 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
2020-07-16 08:48:51 +03:00
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const TAB_GROUP_TWO = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
];
const TAB_GROUP_FOUR = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
{ value: "4", label: "Aries" },
];
export default class SystemPageCardTabs extends React.Component {
state = {
exampleOne: "1",
exampleTwo: "4",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage
title="SDS: Card Tabs"
description="..."
url="https://slate.host/_/system/card-tabs"
>
<System.H1>
Card Tabs <ViewSourceLink file="system/card-tabs.js" />
</System.H1>
<br />
<br />
<System.P>
The CardTabGroup component is used to allow the users to switch
between views.
</System.P>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P>Import React and the CardTabGroup Component.</System.P>
<br />
<br />
<CodeBlock>
2020-07-28 23:27:53 +03:00
{`import * as React from "react";
import { CardTabGroup } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
2020-06-24 05:02:55 +03:00
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Define the tab group values and labels.</System.P>
<br />
<CodeBlock>
{`const TAB_GROUP_TWO = [
2020-07-28 23:27:53 +03:00
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
2020-06-24 05:02:55 +03:00
];
2020-06-24 05:02:55 +03:00
const TAB_GROUP_FOUR = [
2020-07-28 23:27:53 +03:00
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
{ value: "4", label: "Aries" },
2020-06-24 05:02:55 +03:00
];`}
</CodeBlock>
2020-06-24 05:02:55 +03:00
<br />
<System.P>Declare the CardTabGroup component.</System.P>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
2020-07-28 23:27:53 +03:00
state = { exampleOne: "1" };
2020-07-28 23:27:53 +03:00
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
2020-07-28 23:27:53 +03:00
render() {
return (
<CardTabGroup
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
);
}
}
2020-06-24 05:02:55 +03:00
class ExampleTwo extends React.Component {
2020-07-28 23:27:53 +03:00
state = { exampleTwo: "4" };
2020-07-28 23:27:53 +03:00
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
2020-07-28 23:27:53 +03:00
render() {
return (
<CardTabGroup
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
2020-06-24 05:02:55 +03:00
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.CardTabGroup
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />
<br />
<System.CardTabGroup
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Card Tabs">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
onChange
</span>
),
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
value
</span>
),
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
},
{
id: 3,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
options
</span>
),
b: "Array",
c: "[]",
d:
"An array of options, each of which has a value and a label",
},
{
id: 4,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}