@cieloazul310/gatsby-theme-aoi-components
TypeScript icon, indicating that this package has built-in type declarations

3.4.0 • Public • Published

@cieloazul310/gatsby-theme-aoi-components

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

npm version

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 ListItemprimaryText がリンクになる。

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.defaultbackground.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'

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

<SocialLink>

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

Props

name Type
name `'email'
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

Gatsby Theme Aoi packages

References

Package Sidebar

Install

npm i @cieloazul310/gatsby-theme-aoi-components

Weekly Downloads

2

Version

3.4.0

License

ISC

Unpacked Size

59.9 kB

Total Files

49

Last publish

Collaborators

  • cieloazul310