12.0.2 • Published 2 years ago
@advantest/ui-components v12.0.2
@advantest/ui-components is a set of React components developed by Advantest.
Content
Installation
ui-components is available on npm: @advantest/ui-components.
npm install @advantest/ui-components
Make sure to have the following dependencies in your project (see peerDependencies):
- "@mui/material": "^5.2.1"
- "react": "^18.2.0"
- "react-dom": "^18.2.0"
Examples
import React from "react";
import { Header, Icon, headerIconButtonHover } from "@advantest/ui-components";
import { IconButton, Link } from "@mui/material";
// create the theme in a separate file once
export const Theme = ({ children }: { children: React.ReactNode }) => (
<ThemeProvider theme={theme}>{children}</ThemeProvider>
);
// wrap your application with the created theme at a high level
<Theme>
<MyApp/>
</Theme>
// use the Header and Footer as below
<Header
logo={
<img
src="image url"
alt="alt text"
style={{ width: "200px", height: "58px" }}
/>
}
menuItems={[
<Link
sx={{
typography: "body2",
textDecoration: "none",
textTransform: "uppercase",
marginLeft: 4,
"&:hover": {
fontWeight: 400,
},
}}
>
Menu item 1
</Link>,
<Link
sx={{
typography: "body2",
textDecoration: "none",
textTransform: "uppercase",
marginLeft: 4,
"&:hover": {
fontWeight: 400,
},
}}
>
Menu item 2
</Link>
]}
servicesMenu={{ services: [
{
icon: <Icon category="Action" label="Calendar" viewBox="-2 -2 16 16" />,
service: {
id: "1",
title: "service 1",
sequence: 1,
href: "/",
category: {
sequence: 1,
title: "category 1",
},
},
},
{
logo: (
<img
src="service logo url"
alt="alt"
style={{ height: 24 }}
/>
),
service: {
id: "2",
title: "service 2",
sequence: 2,
href: "/",
category: {
sequence: 2,
title: "category 2",
},
},
},
], noSearch: true }}
actionComponents={[
<IconButton
key="1"
sx={{
"&:focus-visible": {
border: "1px solid black",
},
}}
disableRipple
onClick={() => {}}
>
<Icon category="Menu" label="Profile" />
</IconButton>
]}
headerSecondRow={{
applicationTitle: "Application Title",
breadcrumbItems: [
<Link href="/" sx={{ marginLeft: "-8px" }} key={1}>
<IconButton>
<Icon category="SI" label="Home" />
</IconButton>
</Link>,
<Link href="/" sx={{ textDecoration: "none" }} key={2}>
path 1
</Link>,
<Link
href="/"
sx={{ textDecoration: "none", background: "lightgrey" }}
key={3}
>
path 2
</Link>,
],
}}
/>
<Footer
legalLinks={
<Box
sx={{
width: "300px",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}}
>
<Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
<Typography variant="subtitle2">Contact</Typography>
</Link>
<Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
<Typography variant="subtitle2">Terms of Use</Typography>
</Link>
<Link href="/" target="_blank" sx={{ textDecoration: "none" }}>
<Typography variant="subtitle2">Privacy Policy</Typography>
</Link>
</Box>
}
socialMediaLinks={
<Box
sx={{
width: "120px",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}}
>
<Link href="/" target="_blank">
<Icon category="Action" label="Facebook" viewBox="0 0 26 26" />
</Link>
<Link href="/" target="_blank">
<Icon category="Action" label="Twitter" viewBox="0 0 26 26" />
</Link>
</Box>
}
/>
Note: One way to use Rubik font is to load it from Google Fonts:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap"
rel="stylesheet"
/>
12.0.1
2 years ago
12.0.2
2 years ago
10.0.0
2 years ago
6.0.0
2 years ago
7.0.0
2 years ago
7.0.4
2 years ago
7.0.3
2 years ago
7.0.2
2 years ago
7.0.1
2 years ago
7.0.8
2 years ago
7.0.7
2 years ago
7.0.6
2 years ago
7.0.5
2 years ago
7.0.9
2 years ago
12.0.0
2 years ago
8.0.0
2 years ago
11.0.4
2 years ago
7.0.10
2 years ago
7.0.11
2 years ago
9.0.0
2 years ago
11.0.2
2 years ago
11.0.3
2 years ago
11.0.0
2 years ago
11.0.1
2 years ago
5.0.4
2 years ago
5.0.2
2 years ago
5.0.1
2 years ago
5.0.0
2 years ago
4.0.0
2 years ago
3.0.3
2 years ago
3.0.2
2 years ago
1.0.0
2 years ago
3.0.1
2 years ago
3.0.0
2 years ago
2.0.0
2 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago