@cieloazul310/gatsby-theme-aoi-components

v3.4.0

Published

2 years ago

MUI based components for @cieloazul310/gatsby-theme-aoi

0High
0Medium
0Low

cieloazul310

gatsby gatsby-theme mui material-ui

@cieloazul310/gatsby-theme-aoi-components

A components libary for @cieloazul310/gatsby-theme-aoi built with MUI

Import

import { AppLink } from '@cieloazul310/gatsby-theme-aoi';

Components

`<AppLink>`

Gatsby Link + MUI Link

Example Code

<AppLink to="/page-2/">
  Go to Page 2
</AppLink>

Props

MUI Link Props
https://mui.com/api/link/)

@reach/router Link Props
https://reach.tech/router/api/Link

`<AppLinkButton>`

Gatsby Link + MUI Button

Example Code

<AppLinkButton to="/page-2/" variant="contained" color="primary">
  Go to Page 2
</AppLinkButton>

Props

MUI Button Props
https://mui.com/api/button/

@reach/router Link Props
https://reach.tech/router/api/Link

`<BottomNavigationAppLink>`

Gatsby Link + MUI BottomNavigationAction

Example Code

import BottomNavigation from '@mui/material/BottomNavigation';
import { BottomNavigationAppLink, usePathnameWithoutPrefix } from '@cieloazul310/gatsby-theme-aoi';

function BottomNav() {
  const pathname = usePathnameWithoutPrefix();
  return (
    <BottomNavigation 
      value={pathname}
      showLabels
    >
      <BottomNavigationAppLink
       value="/"
       label="Home"
       icon={<HomeIcon />} 
      />
      <BottomNavigationAppLink
       value="/page-2/" 
       label="Page 2"
       icon={<PersonIcon />}
      />
    </BottomNavigation>
  );
}

Props

MUI BottomNavigationAction Props
https://mui.com/api/bottom-navigation-action/

NOTE: Gatsby Link's to prop is same to value prop.

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/AppLink.tsx

`<Article>`

For article

Props

| Name | Type | Default | |------------|-------------------|---------| | children | React.ReactNode | | | maxWidth | string | 'sm' |

&
MUI Container Props
https://mui.com/api/container/

`<ArticleTitle>`

<h2>

Props

MUI Typography Props
https://mui.com/api/typography/

`<Paragraph>`

equivalent to:
<Typography variant="body1" paragraph>

Props

MUI Typography Props
https://mui.com/api/typography/

`<SubParagraph>`

equivalent to:
<Typography variant="body2" paragraph>

Props

MUI Typography Props
https://mui.com/api/typography/

`<H3>`

<h3> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<H4>`

<h4> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<H5>`

<h5> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<H6>`

<h6> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Blockquote>`

<blockquote> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Hr>`

MUI Divider with margin-top and margin-bottom

`<InlineCode>`

<code> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Ul>`

<ul> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Ol>`

<ol> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Li>`

<li> for Gatsby Theme Aoi

Props

MUI Typography Props
https://mui.com/api/typography/

`<Alert>`

Simplified MUI <Alert>

Props

| name | type | default | |------|------|---------| | title | string | undefiend |

&
MUI Alert Props
https://mui.com/api/alert/

Example Code

<Alert severity="error" title="Error">
  Error message hoge hoge hoge.
</Alert>

<Alert severity="success">
  Success message hoge hoge hoge.
</Alert>

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/Article.tsx

`<ExternalLink>`

MUI Link with target="_blank" rel="noopener noreferrer"

Example Code

<ExternalLink href="https://www.mito-hollyhock.net/">
  Link
</ExternalLink>

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/ExternalLink.tsx

`<Jumbotron>`

Jumbotorn like Bootstrap

Example Code

// with title
<Jumbotron title="Vamos" maxWidth="md" />

// with children
<Jumbotron maxWidth="md">
  <Typography variant="body2">Type</Typography>
  <Typography variant="h5" component="h2" gutterBottom>
    Title
  </Typography>
  <Button variant="contained">
    Getting Started
  </Button>
</Jumbotron>

Props

| name | Type | Default | |-------------|-------------------|-------------| | children? | React.ReactNode | undefined | | title? | string | undefined | | maxWidth? | Breakpoints | undefined | | height? | number | undefined | | bgColor? | string | undefined | | bgImage? | string | undefined | | gradient? | boolean | undefined |

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/Jumbotron.tsx

`<ListItemAppLink>`

Gatsby Link + MUI ListItem

Example Code

<List>
  <ListItemAppLink to="/page-2/">
    <ListItemIcon>
      <PersonIcon>
    </ListItemIcon>
    <ListItemText primary="Page 2" />
  </ListItemAppLink>
</List>

Props

MUI ListItem Props
https://mui.com/api/list-item/

@reach/router Link Props
https://reach.tech/router/api/Link

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/ListItemAppLink.tsx

`<ListItemLink>`

Gatsby Link を装飾した Gatsby Theme Aoi 独自のコンポーネント。 xs size: Button, sm size ListItem の primaryText がリンクになる。

Example Code

<List>
  <ListItemLink to="/page-2/" primaryText="Page-2" />
</List>

Props

| name | type | default | description | |--------------------|-------------------|--------------|--------| | to | string | Requried | | | color? | string | 'inherit' | MUI Link Color | | primaryText | string | Requried | | | secondaryText? | string | undefined | | | button? | boolean | undefined | 'xs' では常に true | | inset? | boolean | false | | | avatar? | React.ReactNode | undefined | | | secondaryAction? | React.ReactNode | undefined | |

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/ListItemLink.tsx

`<ListItemToggleDarkMode>`

MUI ListItem に @cieloazul310/gatsby-theme-aoi-top-layout のダークモード切り替えのスイッチを組み込んだコンポーネント

Props

| name | type | default | |------|------|---------| | label? | string | 'Dark Mode' |

`<ListItemToggleUseSystemTheme>`

MUI ListItem に @cieloazul310/gatsby-theme-aoi-top-layout のシステムテーマ利用の切り替えのスイッチを組み込んだコンポーネント

Props

| name | type | default | |------|------|---------| | label? | string | 'Auto Dark Mode' |

Example Code

<List>
  <ListItemToggleDarkMode label="ダークモード" />
  <ListItemUseSystemTheme label="システムテーマ" />
</List>

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/ListItemToggleDarkMode.tsx

`<Section>`

background.paper の背景色を持った <div> コンポーネント

`<SectionDivider>`

<Section> コンポーネントを区切るための空の <div> 要素。<Section> 要素より少し暗い背景色を持つ。

NOTE: Material-UI v4 以前は background.default は background.paper より暗く、空の <div> 要素を置くことでレイアウトにアクセントを付けられた。

Example Code

<Layout title="Page Title">
  <Jumbotron title="Example" />
  <SectionDivider />
  <Section>
    <Article>
      {...article}
    </Article>
  </Section>
  <SectionDivider />
  <Section>
    <Article>
      {...footer}
    </Article>
  </Section>
</Layout>

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/Section.tsx

`<SocialIcon>`

MUI Icon にソーシャルアイコンを設定したコンポーネント

Props

| name | Type | |--------|-------------------| | name | 'email' | 'twitter' | 'facebook' | 'github' | 'instagram' | 'youtube' | 'linkedin' | string |

&
IconProps: https://mui.com/api/icon/

`<SocialLink>`

<SocialIcon> に外部リンクを設定したコンポーネント

Props

| name | Type | |--------|-------------------| | name | 'email' | 'twitter' | 'facebook' | 'github' | 'instagram' | 'youtube' | 'linkedin' | string | | url | string | &
IconProps: https://mui.com/api/icon/

Example Code

const { socials } = useSiteMetadata();

return (
  <div>
    {social.map(({ name, url }, index) => (
      <SocialLink key={index.toString()} name={name} url={url} />
    ))}
  </div>
);

Source: https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-components/src/Socials.tsx

`<TabPane>`

Gatsby Theme Aoi のためのタブの枠コンポーネント

Example

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

function Page() {
  const [tab, setTab] = React.useState(0);
  const handleTab = (event: React.SyntheticEvent, newValue: number) => {
    setTab(newValue);
  };
  const handleTabIndex = (index: number) => () => {
    setTab(index);
  };
  return (
    <Layout
      tabs={
        <Tabs value={tab} onChange={handleTab}>
          <Tab label="Tab1" />
          <Tab label="Tab2" />
          <Tab label="Tab3" />
        </Tabs>
      }
    >
      <TabPane index={0} currentTab={tab}>
        {...children}
      </TabPane>
      <TabPane index={1} currentTab={tab}>
        {...children}
      </TabPane>
      <TabPane index={2} currentTab={tab}>
        {...children}
      </TabPane>
    </Layout>
  );
}

Props

| name | type | default | |------|------|---------| | currentTab | number | Requried | | index | number | Requried | | children | React.ReactNode | Requried | | renderNeightbor? | boolean | false |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@cieloazul310/gatsby-theme-aoi-components

Import

Components

<AppLink>

Example Code

Props

<AppLinkButton>

Example Code

Props

<BottomNavigationAppLink>

Example Code

Props

<Article>

Props

<ArticleTitle>

Props

<Paragraph>

Props

<SubParagraph>

Props

<H3>

Props

<H4>

Props

<H5>

Props

<H6>

Props

<Blockquote>

Props

<Hr>

<InlineCode>

Props

<Ul>

Props

<Ol>

Props

<Li>

Props

<Alert>

Props

Example Code

<ExternalLink>

Example Code

<Jumbotron>

Example Code

Props

<ListItemAppLink>

Example Code

Props

<ListItemLink>

Example Code

Props

<ListItemToggleDarkMode>

Props

<ListItemToggleUseSystemTheme>

Props

Example Code

<Section>

<SectionDivider>

Example Code

<SocialIcon>

Props

<SocialLink>

Props

Example Code

<TabPane>

Example

Props

Gatsby Theme Aoi packages

References

`<AppLink>`

`<AppLinkButton>`

`<BottomNavigationAppLink>`

`<Article>`

`<ArticleTitle>`

`<Paragraph>`

`<SubParagraph>`

`<H3>`

`<H4>`

`<H5>`

`<H6>`

`<Blockquote>`

`<Hr>`

`<InlineCode>`

`<Ul>`

`<Ol>`

`<Li>`

`<Alert>`

`<ExternalLink>`

`<Jumbotron>`

`<ListItemAppLink>`

`<ListItemLink>`

`<ListItemToggleDarkMode>`

`<ListItemToggleUseSystemTheme>`

`<Section>`

`<SectionDivider>`

`<SocialIcon>`

`<SocialLink>`

`<TabPane>`