This is a Test project

這是一個引用了chakra-ui框架的一個npm

观看效果网址

https://viviui.vercel.app/?path=/story/footer--footer

Header使用

相关组件

Header：为其子级提供上下文的包装器。
HeaderButton：能接受到icon，title的按钮，以及接收其它chakra-ui的样式。
HeaderMenuButton：菜单列表的触发器。
DrawerItemHeader：选单的头部文字。
DrawerItemDivider：选单的线。
DrawerItemButton：选单的按钮。

import{ Header, HeaderButton, HeaderMenuButton, DrawerItemHeader, DrawerItemDivider, DrawerItemButton } from 'viviui'

用法

HeaderButton 的 Component 用法

HeaderButton 默认在chakra响应式里小屏（sm）的时候是隐藏

HeaderButton 能传入的参数

名称	说明
icon	传入 react-icons 的 icon 名字。
title	传入 HeaderButton 的文字
chidren	HeaderButton 的子集。
...props	能接受 chakra 的 Button 样式到 HeaderButton 里。

HeaderButton里的Props

名称	默认	描述
fontSize	{{ base: 'xs', sm: 'md', md: 'lg' }}	字体随屏幕而变大变小
px	{{ base: 1, sm: 4 }}	内边距随屏幕而变宽变窄
display	{{ base: 'none', sm: 'none', md: 'flex' }}	随屏幕而显示隐藏
color	gray.500	字体颜色
variant	ghost	要使用的按钮样式的变体

有 icon 的 HeaderButton

<HeaderButton icon={MdAccessibility} title='HeaderButton' />

没有 icon 的 HeaderButton

<HeaderButton title='首页' />

HeaderMenuButton 的 Component 用法

MenuButton：菜单列表的触发器，需要和chakra 的 Menu 一起使用。

HeaderMenuButton 传入的参数

名称	描述
props	能接收到 chakra 的 MenuButton样式

MenuButton 和 Menu 一起使用并传入头像到 MenuButton

<Menu placement='bottom-end'>
  <MenuButton as='div'>
    <Avatar name='vivi' src={MyImage} size='sm' cursor='pointer' />
  </MenuButton>
  <MenuList w='280px'>
    <NextLink href='/' passHref>
      <MenuItem as='a'>
        <Box as={IoMdHome} mr='4px' />
        <span>返回 Macau School</span>
      </MenuItem>
    </NextLink>
    <Link href='/'>
      <MenuItem>
        <Box as={AiOutlineLogout} mr='4px' />
        <span>登出</span>
      </MenuItem>
    </Link>
  </MenuList>
</Menu>

DrawerItemButton，DrawerItemHeader，DrawerItemDivider 的 Component 用法

DrawerItemButton，DrawerItemHeader，DrawerItemDivider 需要和 chakra 的 Drawer 一起使用，都需要放在 Drawer 标签的 DrawerBody 里面
DrawerItemHeader： chakra-ui Drawer的头部文字。
DrawerItemDivider： chakra-ui Drawer的线。
DrawerItemButton： chakra-ui Drawer的按钮。

DrawerItemButton

能接受的参数

名称	描述
title	传入文字进 DrawerItemButton。
icon	传入 react-icons 的 icon 名字。
children	DrawerItemButton的子集。
...props	能接收到 chakra-ui 的 Button 样式。

props

名称	默认	描述
_hover	{{ ml: '2px', background: '# CEEDFF’ }}	鼠标移到焦点
width	100%	宽度
justifyContent	flex-start	整体排列左侧
bg	none	背景

DrawerItemHeader

名称	描述
props	能接收到 chakra-ui 的字体样式，children 也可以解构进去。

DrawerItemDivider

名称	描述
props	能接收到 chakra-ui 的 Divider 样式。

DrawerItemButton，DrawerItemHeader，DrawerItemDivider 和 chakra 的 Drawer 一起使用

const DrawerExample = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <IconButton
        onClick={onOpen}
        aria-label='Navigation Menu'
        fontSize='20px'
        variant='ghost'
        icon={MdDehaze}
        marginRight='-16px'
      />
      <Drawer placement='left' onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerItemHeader borderBottomWidth='1px'>選項</DrawerItemHeader>
          <DrawerBody fontSize={{ sm: 'xs', md: 'sm' }}>
            <DrawerItemButton icon={IoMdPaper}>首頁</DrawerItemButton>
            <DrawerItemDivider />
            <DrawerItemButton icon={MdDashboard}>学校專頁</DrawerItemButton>
            <DrawerItemDivider />
            <DrawerItemButton icon={IoMdSearch}>搜索</DrawerItemButton>
            <DrawerItemDivider />
            <DrawerItemButton icon={IoMdHome}>返回 Macau School</DrawerItemButton>
            <DrawerItemDivider />
            <DrawerItemButton icon={AiOutlineLogout}>登出</DrawerItemButton>
            <DrawerItemDivider />
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

Header 的 Component 用法

名称	描述
logo	自定义logo并出现在header左侧，logo的跳转路径需要自己去传。
left	自定义header的left数据。
right	自定义header的right数据。
center	自定义header的center数据。
drawerItems	直接传入选单里的数据。
containerProps	传入 chakra 能接受的 Box 样式到头部
…props	传入 chakra 能接收的 Box 样式到最外层的 Box 里

props

名称	默认	描述
pos	fixed	固定单位
top	0	离屏幕上方为0
left	0	离屏幕左方为0
right	0	离屏幕右方为0
zIndex	4
borderBottomWidth	1px	底线为1px
width	full	满屏

containerProps

名称	默认	描述
height	4rem	Header 的高
width	full	宽满屏
maxWidth	1280px	最大的宽为1280px
mx	auto	x轴上外边距一样
px	8px	x轴上内边距为8px

logo与right数据头像menu

网页版

手机版

<Header
  logo={
    <NextLink href='/' passHref>
      <Box
        as='a'
        d='block'
      >
        <Heading as='h1' size='lg' letterSpacing='-.1rem'>
          <Box as='span' d={{ base: 'none', sm: 'inline' }}>
            Macau School
          </Box>
          <Box as='span' d={{ base: 'inline', sm: 'none' }}>
            MS
          </Box>
          <Box as='span' color='blue.500' d={{ base: 'none', md: 'inline' }}>
            {' '}學不停
          </Box>
        </Heading>
      </Box>
    </NextLink>
  }
  right={
    <Menu placement='bottom-end'>
      <MenuButton as='div'>
        <Avatar name='vivi' src={MyImage} size='sm' cursor='pointer' />
      </MenuButton>
      <MenuList w='280px'>
        <NextLink href='/' passHref>
          <MenuItem as='a'>
            <Box as={IoMdHome} mr='4px' />
            <span>返回 Macau School</span>
          </MenuItem>
        </NextLink>
        <Link href='/'>
          <MenuItem>
            <Box as={AiOutlineLogout} mr='4px' />
            <span>登出</span>
          </MenuItem>
        </Link>
      </MenuList>
    </Menu>
  }
/>

传入 logo center right 的数据案例

网页版

手机版

点击menu前

点击menu后

Macau School MS {' '}學不停 }

center={
  <>
    <HeaderButton icon={IoMdPaper} title='首頁' />
    <HeaderButton icon={MdDashboard} title='学校專頁' />
    <HeaderButton icon={IoMdSearch} title='搜索' />
  </>
}

right={
  <Menu placement='bottom-end'>
    <MenuButton as='div'>
      <Avatar name='vivi' src={MyImage} size='sm' cursor='pointer' />
    </MenuButton>
    <MenuList w='280px'>
      <NextLink href='/' passHref>
        <MenuItem as='a'>
          <Box as={IoMdHome} mr='4px' />
          <span>返回 Macau School</span>
        </MenuItem>
      </NextLink>
      <Link href='/'>
        <MenuItem>
          <Box as={AiOutlineLogout} mr='4px' />
          <span>登出</span>
        </MenuItem>
      </Link>
    </MenuList>
  </Menu>
}
drawerItems={
  <>
      <DrawerItemButton icon={IoMdPaper}>首頁</DrawerItemButton>
      <DrawerItemDivider />
      <DrawerItemButton icon={MdDashboard}>学校專頁</DrawerItemButton>
      <DrawerItemDivider />
      <DrawerItemButton icon={IoMdSearch}>搜索</DrawerItemButton>
      <DrawerItemDivider />
      <DrawerItemButton icon={IoMdHome}>返回 Macau School</DrawerItemButton>
      <DrawerItemDivider />
      <DrawerItemButton icon={AiOutlineLogout}>登出</DrawerItemButton>
      <DrawerItemDivider />
    </>
}

Hero

相关组件

Hero：为其子级提供上下文的包装器。

import{ Hero } from 'viviui'

用法

Hero的用法

Hero 能传入的参数

名称	描述
title	传入标题。
subtitle	传入小标题。
noBottomBorder	可以不要底线。
leftButton	输入左边按钮。
rightButton	输入右边按钮。
drawerItems	选单里的数据。
children	Hero的子孙。
…props	传入 chakra 能接受的 Box 样式到 Hero 的最外层 Box 里

props

名称	默认	描述
pt	160px	上方的内边距
pb	94	下方的内边距

title，subtitle，children，children传入了按钮。

网页版
手机版

<Hero
  title={
    <>
      我的學校
      <Box as='span' color='blue.500'>
        {' '}
        SCHOOL
      </Box>
    </>
  }
  subtitle='SCHOOL 是一個簡單的、多模組的線上的學校系統。可透過 SCHOOL 進行日常校園管理，了解學生學習生活，促進發掘學生閃光點等等。專為澳門中小幼學校而設。'
>
  <Button size='lg' as='a' variantColor='blue' w={{ base: '100%', sm: 'auto' }}>
    登入到我的學校
  </Button>
</Hero>

FeatureGrid

相关组件

FeatrueGrid：为其子级提供上下文的包装器。
Featrure：能接受到icon，title,subtitle,children及其它chakra-ui样式。
FeatrueGrid 和 Featrure 需要一起使用。

import{ FeatrueGrid, Featrure } from 'viviui'

用法

FeatrueGrid

children：可以自定义他的儿子，也可以使用 Featrure 的 component
gridProps：传入 chakra 能接受的 Grid 样式到 FeatrueGrid
...props：传入 chakra 能接受 Box 的样式进 FeatrueGrid 的最外层 Box 里

Featrure

  title： 傳入title
  icon： 傳入 react-icons 的 icon 名字
  subtitle： 傳入subtitle
  children： Featrure 的子孫
  ...props： 傳入 chakra 能接受的 Box 样式到 Featrure 的最外层 Box 裏

网页版

手机版

<FeatrueGrid>
  <Feature
    title='學生成長檔案'
    subtitle='SCHOOL 替每個學生都建立一個成長檔案，老師能記錄學生的學習生活，如學生的擅好，長處等。
                  使老師更能發現學生的閃光點。同學也能充分了解校園生活所帶給他的歷程。'
    icon={MdAccessibility}
  />
  <Feature
    title='學生相冊'
    subtitle='每個小朋友成長的瞬間都值得紀念。SCHOOL 提供的學生相冊除了能作為記錄學生活動相片外，也能和學生成長檔案、學生活動事件相連結。讓系統能客觀地分析學生的智能發展方向。'
    icon={MdPhoto}
  />
  <Feature
    title='與基力掛勾的學生評估表'
    subtitle='每個小朋友成長的瞬間都值得紀念。SCHOOL 提供的學生相冊除了能作為記錄學生活動相片外，也能和學生成長檔案、學生活動事件相連結。讓系統能客觀地分析學生的智能發展方向。'
    icon={MdShowChart}
  />
</FeatrueGrid>

ModalSelector

相關組件

ModalSelector: 包容器
SquareButton：左侧新增按钮
ModalSelectorOption：弹出窗口后的 modal 数据
EditButton：右侧編輯按钮

import { ModalSelector, SquareButton, ModalSelectorOption, EditButton } from "viviui"

用法

SquareButton 的 Component 用法

SquareButton 能傳入的參數

名字	描述
props	傳入 children 和 chakra 能接受的 Button 样式到 SquareButton 裏

SquareButton 裏的 props

名字	默認	描述
fontSize	{{ base: '14px', md: '16px' }}	隨著屏幕字體的變化

新增按鈕

<SquareButton>新增管理员</SquareButton>

EditButton

EditButton 能傳入的參數

名字	描述
props	傳入 children 和 chakra 能接受的 IconButton 样式到 EditButton 裏

<EditButton icon='edit' />

ModalSelector

ModalSelector 能傳入的參數

名称	描述
left	左侧数据
right	右侧数据
value	自定义中间顯示的数据
children	点击中间value按钮时，自定义弹出的数据
modalTitle	弹出框中的标题
…props	能接受 chakra 的 Box 样式到 ModalSelector 里。

ModalSelector 裏的 props

名称	默认	描述
display	flex	默認為 flex 類型
justifyContent	center	讓整個 Box 居中中間
mt	10px	裏 top 外邊距為10px

點擊中間前

點擊中間后

const ModalSelectorTest = () => {
  const [values, setValues] = useState('cdsj6 2019/2020 Dashboard')
  return (
    <ModalSelector
      modalTitle='Dashboard 選擇'
      value={values}
      onChange={setValues}
      left={
        <SquareButton>新增</SquareButton>
      }
      right={
        <EditButton icon='edit' />
      }
    >
      <ModalSelectorOption value='cdsj6 2019/2020 Dashboard'>
        cdsj6 2019/2020 Dashboard
      </ModalSelectorOption>
      <ModalSelectorOption value='cdsj6 2020/2021 Dashboard'>
        cdsj6 2020/2021 Dashboard
      </ModalSelectorOption>
      <ModalSelectorOption value='cdsj6 2021/2022 Dashboard'>
        cdsj6 2021/2022 Dashboard
      </ModalSelectorOption>
    </ModalSelector>
  )
}

ModalSelector

相關組件

ModalSelector: 包容器
SquareButton：左侧新增按钮
ModalSelectorOption：弹出窗口后的 modal 数据
EditButton：右侧編輯按钮

import { ModalSelector, SquareButton, ModalSelectorOption, EditButton } from "viviui"

用法

SquareButton 的 Component 用法

SquareButton 能傳入的參數

名字	描述
props	傳入 children 和 chakra 能接受的 Button 样式到 SquareButton 裏

SquareButton 裏的 props

名字	默認	描述
fontSize	{{ base: '14px', md: '16px' }}	隨著屏幕字體的變化

新增按鈕

<SquareButton>新增管理员</SquareButton>

EditButton

EditButton 能傳入的參數

名字	描述
props	傳入 children 和 chakra 能接受的 IconButton 样式到 EditButton 裏

<EditButton icon='edit' />

ModalSelector

ModalSelector 能傳入的參數

名称	描述
left	左侧数据
right	右侧数据
value	自定义中间顯示的数据
children	点击中间value按钮时，自定义弹出的数据
modalTitle	弹出框中的标题
…props	能接受 chakra 的 Box 样式到 ModalSelector 里。

ModalSelector 裏的 props

名称	默认	描述
display	flex	默認為 flex 類型
justifyContent	center	讓整個 Box 居中中間
mt	10px	裏 top 外邊距為10px

點擊中間前

點擊中間后

const ModalSelectorTest = () => {
  const [values, setValues] = useState('cdsj6 2019/2020 Dashboard')
  return (
    <ModalSelector
      modalTitle='Dashboard 選擇'
      value={values}
      onChange={setValues}
      left={
        <SquareButton>新增</SquareButton>
      }
      right={
        <EditButton icon='edit' />
      }
    >
      <ModalSelectorOption value='cdsj6 2019/2020 Dashboard'>
        cdsj6 2019/2020 Dashboard
      </ModalSelectorOption>
      <ModalSelectorOption value='cdsj6 2020/2021 Dashboard'>
        cdsj6 2020/2021 Dashboard
      </ModalSelectorOption>
      <ModalSelectorOption value='cdsj6 2021/2022 Dashboard'>
        cdsj6 2021/2022 Dashboard
      </ModalSelectorOption>
    </ModalSelector>
  )
}

Fieldset

Fieldset: 横线中间有字，横线默认有
LeftFieldsetButton: 线左边的Button

import { Fieldset, LeftFieldsetButton } from "viviui"

LeftFieldsetButton的 Component 用法

LeftFieldsetButton 傳入的參數

名字	描述
props	能接受 children 及 chakra 的 Button 样式到 RoundedButton 里。

LeftFieldsetButton 的 props

名字	默認	描述
borderWidth	1px	變框綫的寬度
rounded	999px	四角為最大的弧度
minW	{{ base: '80px', sm: '110px' }}	最小寬度隨屏幕而變
position	absolute	絕對定位
top	0	離上層固定定位的top為0
left	0	離上層固定定位的left為0

<LeftFieldsetButton>新增</LeftFieldsetButton>

Fieldset 的 Component 用法

需要添加一個背景顔色，橫綫是橫穿在字裏的，需要給背景顔色，擋住在字后面的橫綫，不會改變整個box 的背景顔色的。

Fieldset 傳入的參數

名字	描述
title	横线上的标题
left	标题左侧數據
children	子集内容
…props	能接受 chakra 的 Box 样式到 Fieldset 里。

Fieldset 的 props

名字	默認	描述
position	relative	固定定位，從而改變綫的類型
width	full	寬為滿屏
textAlign	center	字在 Box 的中間
my	20px	在Y軸上，外邊距為20px

左邊沒有按鈕時

<Fieldset title='班級' bg='white' />

左邊有按鈕

<Fieldset
  bg='white'
  title='班級'
  left={
    <LeftFieldsetButton>新增</LeftFieldsetButton>
  }
/>

Group

相關組件

Group: 为其子级提供上下文的包装器。
Card: 单个卡片

import { Group, Card } from "viviui"

用法

Card 的 component 的用法

Card 接收的參數

名字	描述
title	顯示在 Card 的標題
children	它的子集數據
...props	能接受 chakra 的 Box 样式到 Card 里。

Card 的 props

名字	默認	描述
bg	white	背景為白色
w	{['45%', '30.5%', '22.5%', '22.6%']}	寬隨著屏幕放大縮小而做改變
p	20px	内邊距為20px
borderRadius	10px	邊框的弧度為10px
d	inline-block	為行快標簽
m	{['2%', '1%', '1%', '1%']}	外邊框隨著屏幕放大縮小而做改變
shadow	2px 2px 6px 0px #b9b9b9	邊框陰影

<Card title="甲班" />

Group 的 Component 用法

Group 能接受到的值

名字	描述
children	接收 CardDeck 的子集
...props	能接受 chakra 的 Box 样式到 Card 里。

Group 的 props

名字	默認	描述
mx	auto	X軸上外邊距為 auto
px	8px	X軸上内邊距為 8px
width	full	寬為滿屏
maxWidth	960px	最大寬度為960px
pb	16px	外邊居底部為16px

最大屏時

小屏時

最小屏時

const Group= () => {
  return (
    <Group>
      <Card title='甲班' />
      <Card title='乙班' />
      <Card title='丙班' />
      <Card title='丁班' />
      <Card title='超級班' />
    </Group>
  )
}

page

相关组件

Page：为其子级提供上下文的包装器。
HeaderPage： Page 頭部的 Heading 文字。
BackButton：返回按鈕。
DeleteButton：刪除按鈕。
DeleteRemind：刪除提示及按鈕。
LabelName：標簽加名字，例：name：vivi。
ManageMent：有副標題的頁面。
ColumnIconText：輸入 icon 與文字，文字下有橫綫。
NewButton：一個新的按鈕。
Row：顯示簡單個人學校用戶的使用 component。
SureButton：確認按鈕。

import{ Page, HeaderPage, BackButton, DeleteIconButton, DeleteRemind, LabelName, ManageMent, ColumnIconText NewButton, Row, SureButton } from 'viviui'

用法

HeaderPage 的 component 用法

HeaderPage 接收的參數

名字	描述
props	能接受 children 與 chakra 的 Hading 样式到 HeaderPage 里。

HeaderPage 的 props

名字	默認	描述
textAlign	center	字體居中

只需要直接傳入文字就行了

<HeaderPage>這是HeaderPage component</HeaderPage>

BackButton 的 component 用法

BackButton 接收的參數

名字	描述
props	能接受 children 與 chakra 的 Button 样式到 BackButton 里。

BackButton 的 props

名字	默認	描述
backgroundColor	#c2c2c2	BackButton 的背景顔色
minW	{{ base: '100%', sm: '100%', md: '200px' }}	BackButton 隨著屏幕的擴大縮小而變化
mr	12px	右邊外邊距為 12px
mt	32px	上面外邊距為 32px
color	white	字體顔色為白色
_hover	{{backgroundColor: '#b8b8b8'}}	鼠標移上去后顔色改變
_active	{{boxShadow: '0 0 0 3px rgba(175, 175, 175, 0.6)'}}	點下去那瞬間會對 BackButton 進行邊框陰影賦值

點擊前

點擊下去不動的時候

<BackButton>返回</BackButton>

DeleteIconButton 的 component 用法

DeleteIconButton 接收的參數

名字	描述
props	能接受 children 與 chakra 的 IconButton 样式到 DeleteIconButton 里。

DeleteIconButton 的 props

名字	默認	描述
icon	delete	默認為 delete 垃圾桶的 icon
variantColor	red	默認背景為紅色

<DeleteIconButton />

DeleteRemind 的 component 用法

DeleteRemind接收的參數

名字	描述
title	DeleteRemind 的標題
content	DeleteRemind 的文字説明
children	刪除按鈕所放的 children 位置
…props	能接受 chakra 的 Box 样式到 DeleteRemind 里。

DeleteRemind 的 props

名字	默認	描述
border	1px solid #FED7D7	邊框是實綫1px，顔色是#FED7D7
background	#FFF5F5	背景顔色
rounded	16px	邊框的弧度
mt	80px	上方的外邊距為80px
p	20px	内邊距為20px

網頁版

手機版

<DeleteRemind
  title='標題'
  content='這裏是添加的正文提示。'
>
  <SureButton variantColor='red'>刪除</SureButton>
</DeleteRemind>

LabelName、Row 的 component 用法

LabelName 和 Row 的 component 需要一起用

LabelName 的 component 用法

LabelName 接收的參數

名字	描述
label	LabelName 的標簽。
name	LabelName 標簽后的名字
type	LabelName 的類型
children	LabelName的子集
...props	能接受 chakra 的 Box 样式到 LabelName 里。

LabelName 的props

名字	默認	描述
display	{{ base: 'block', sm: 'flex' }}	隨著屏幕擴大縮小而改變排列類型
lineHeight	40px	字體高度為40px

Row 的 component 用法

Row 接收的參數

名字	描述
right	LabelName 的標簽。
left	LabelName 標簽后的名字
name	Row 的 ch
profilePhoto	頭像的路徑
noDivider	是否需要底綫
children	Row 的子集
...props	能接受 chakra 的 Box 样式到 LabelName 里。

Row 的 props

名字	默認	描述
justify	space-between	排列是兩邊有距離的排列
width	full	寬的屏幕是滿屏
maxWidth	1280px	最大寬度為 1280px
mx	auto	x軸上外邊距為 auto
px	{{ base: '1.25rem', sm: '1.25rem', md: '1.25rem', lg: 0 }}	内邊距隨著屏幕的擴大縮小而變化

網頁版

手機版

<Row
  profilePhoto={MyImage}
  name='vivi'
  left={
    <>
      <LabelName type='（学生）' name='vivi' label='姓名' />
    </>
  }
  right={
    <>
      <DeleteIconButton />
      <EditButton icon='edit' variantColor='blue' ml='5px' />
    </>
  }
/>

ColumnIconText 和 Management 的 component 用法

ColumnIconText 的 component 用法

ColumnIconText 接收的參數

名字	描述
icon	ColumnIconText 的icon
title	ColumnIconText 的文字
children	ColumnIconText 的子集
listIconProps	能接受 chakra 的 ListIcon 样式到 ColumnIconText 里。
dividerProps	能接受 chakra 的 Box 样式到 ColumnIconText 里。
…props	能接受 chakra 的 Box 样式到 ColumnIconText 里。

ColumnIconText 的 listIconProps

名字	默認	描述
fontSize	{{ base: '23px', md: '26px' }}	字體隨著屏幕擴大縮小而變化
alignItems	center	上下居中

ColumnIconText 的 listIconProps

名字	默認	描述
fontSize	{{ base: '23px', md: '26px' }}	字體隨著屏幕擴大縮小而變化

ColumnIconText 的 dividerProps

名字	默認	描述
w	{ base: 'calc(100% - 32px)', md: 'calc(100% - 35px)' }}	隨著屏幕擴大縮小計算出它的寬度
borderBottom	1px solid #ededed	底綫為實綫 1px
p	8px	内邊距為8px

Management 的 component 用法

Management 接收的參數

名字	描述
subTitle	Management 的副標題
children	Management 的子集
descriptionProps	能接受 chakra 的 Heading 样式到 Management 里。
...props	能接受 chakra 的 Box 样式到 Management 里。

Management 的 descriptionProps

名字	默認	描述
fontSize	{{ base: '15px', sm: '1rem' }}	字體隨著屏幕擴大縮小而變化
mt	40px	外邊距的頭部
mb	16px	外邊距的地步

<Management
  px='5%'
  subTitle='你是管理员，可以拥有以下操作...'
>
  <ColumnLine icon={FaSchool} color='#316bc3'>修改学校</ColumnLine>
  <ColumnLine icon={FaUserEdit} color='#316bc3'>学校用户</ColumnLine>
  <ColumnLine icon={GoTrashcan} color='#316bc3'>批量新增</ColumnLine>
  <ColumnLine icon={AiTwotoneSetting} color='#316bc3'>专长设定</ColumnLine>
  <ColumnLine icon={AiTwotoneSetting} color='#316bc3'>智能设定</ColumnLine>
</Management>

NewButton 的 component 用法

NewButton 傳入的參數

名字	描述
props	能接受 children 與 chakra 的 Button 样式到 NewButton 里。

NewButton 的 props

名字	默認	描述
variantColor	blue	NewButton 的背景顔色
rounded	999px	邊框的弧度
mt	8px	頭部的外邊距

<NewButton w='100px'>新增</NewButton>

SureButton 的 component 用法

SureButton 傳入的參數

名字	描述
props	能接受 children 與 chakra 的 Button 样式到 NewButton 里。

SureButton 的 props

名字	默認	描述
variantColor	blue	SureButton 的背景顔色
minW	{{ base: '100%', sm: '100%', md: '200px' }}	邊框的弧度
mr	12px	右邊外邊距 12px
mt	32px	頭部的外邊距 32px

<SureButton>確認</SureButton>

Page 的 component 用法

Page 能傳入的參數

名字	描述
backurl	Page 板塊以上的數據
nodivider	title 底綫默認為 true ，不需要這個 title 底綫時直接傳入 nodivider
children	Page的子集
...props	传入 chakra 能接受的 Box 样式到 Page 的最外层 Box 里

网页版

手机版

const editDashboard = () => {
  return (
    <Page>
      <HeaderPage size='lg' as='h2' pt={4}>編輯 Dashboard</HeaderPage>
      <HeaderPage
        fontSize={{ base: '17px', md: '25px' }}
        mt={5}
      >
        聖若瑟教區中學第六校
      </HeaderPage>
      <Box as='article' px={{ base: 8, sm: 8, md: 16 }} pb={16}>
        <Box
          d='flex'
          justifyContent='space-between'
          flexDirection={{ base: 'column-reverse', md: 'initial' }}
        >
          <BackButton>返回</BackButton>
          <SureButton>確認</SureButton>
        </Box>
        <DeleteRemind
          title='刪除 Dashboard'
          content='删除 Dashborad 後后，將會清空該 Dashborad 的所有資料，該操作不能還原，請謹慎操作。'
          >
          <SureButton variantColor='red'>刪除</SureButton>
        </DeleteRemind>
      </Box>
    </Page>
  )
}

网页版

手机版

<Page
  title={
    <HeaderPage size='lg' as='h2' pt={4}>編輯學校</HeaderPage>
  }
>
  <Box as='article' px={{ base: 8, sm: 8, md: 16 }} pb={16}>
    <Box
      top='0px'
      left='0px'
      bottom='0px'
      right='0px'
      my={5}
    >
      <Row
        profilePhoto={MyImage}
        name='vivi'
        left={
          <>
            <LabelName type='（学生）' name='vivi' label='姓名' />
            <LabelName name='343546' label='學號' />
            <LabelName name='vivi' label='姓名' />
          </>
        }
        right={
          <>
            <DeleteIconButton />
            <EditButton icon='edit' variantColor='blue' />
          </>
        }
      />
    </Box>
  </Box>
</Page>

网页版

手机版

<Page
  title={
    <HeaderPage>
      管理员
    </HeaderPage>
  }
>
  <Management
    px='5%'
    subTitle='你是管理员，可以拥有以下操作...'
  >
    <ColumnLine icon={FaSchool} color='#316bc3'>修改学校</ColumnLine>
    <ColumnLine icon={FaUserEdit} color='#316bc3'>学校用户</ColumnLine>
    <ColumnLine icon={GoTrashcan} color='#316bc3'>批量新增</ColumnLine>
    <ColumnLine icon={AiTwotoneSetting} color='#316bc3'>专长设定</ColumnLine>
    <ColumnLine icon={AiTwotoneSetting} color='#316bc3'>智能设定</ColumnLine>
  </Management>
</Page>

## Table

相关组件

Table：为其子级提供上下文的包装器。
TableHead： Table 的他头部
TableBody： Table 的正文内容。
TableCell：选单的头部文字。
TableRow：选单的线。

import{ Table, TableHead, TableBody, TableCell, TableRow } from 'viviui'

用法

Table 、 TableHead 、TableBody、TableCell 和 TableRow 是同个使用的。
Table

Table 能传入的值

名字	描述
props	能接收 children 和 chakra 的 Box 样式

Table 的 props

名字	默认	描述
w	99%	宽为父级容器的99%
m	auto	外边距为auto
letterSpacing	0.05rem	文字之间的距离

TableHead

TableHead 能传入的值

名字	描述
children	TableHead 的子集
props	能接收 children 和 chakra 的 Box 样式

TableBody

TableBody 能传入的值

名字	描述
children	TableBody 的子集
…props	能接收 chakra 的 Box 样式

TableRow

TableRow 能传入的值

名字	描述
children	TableRow 的子集
…props	能接收 chakra 的 Box 样式

TableRow 的 props

名字	默认	描述
h	40px	高为40px

网页版

手机版

const table = () => {
  const data = [
    {
      fieldName: '姓名',
      describe: '必填'
    },
    {
      fieldName: '英文姓名',
      describe: '選填'
    },
    {
      fieldName: '性別',
      describe: '選填可'
    },
    {
      fieldName: '學生證號碼',
      describe: '選填'
    },
    {
      fieldName: '身份證號碼',
      describe: '選填可留空'
    },
    {
      fieldName: '教青',
      describe: '選填可留空'
    },
    {
      fieldName: '拍卡卡號',
      describe: '選填可留空'
    },
    {
      fieldName: '電郵信箱',
      describe: '必填'
    },
    {
      fieldName: '學生',
      describe: '學生'
    },
    {
      fieldName: '老師',
      describe: '學生'
    },
    {
      fieldName: '學校主管',
      describe: '學生'
    },
    {
      fieldName: '學校管理員',
      describe: '學生'
    }
  ]
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell w='50px'>序號</TableCell>
          <TableCell>名稱</TableCell>
          <TableCell>值</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((item, index) => {
          return (
            <>
              <TableRow>

                <TableCell textAlign='center'>
                  {index + 1}
                </TableCell>

                <TableCell px={{ base: '1', sm: '1', md: '4' }}>
                  {item.fieldName}
                </TableCell>

                <TableCell px={{ base: '1', sm: '1', md: '4' }} py={3}>
                  {item.describe}
                </TableCell>

              </TableRow>
            </>
          )
        })}
      </TableBody>
    </Table>
  )
}

FullScreenView

相关组件

FullScreenView：为其子级提供上下文的包装器。
RedButton：红色并且四个角都是弧度为最大的弧度。
BlueButton：菜单列表的触发器。
ButtonGrid：选单的头部文字。
LargeTitle：选单的线。

import{ FullScreenView, RedButton, BlueButton, BUttonGrid, LargeTitle } from 'viviui'

用法

RedButton 的 component 用法

RedButton 能传入的参数

名称	描述
leftIcon	接收左边的自定义 icon
rightIcon	接收右边的自定义icon
children	Button的子集
...props	能接收到 chakra 的 Button 样式到 RedButton 里

RedButton 里的 props

名称	默认	描述
size	lg	chakra 的 Button 宽度
bg	#E53E3E	背景颜色为红色
w	{{ base: '98%', sm: '340px' }}	宽度当最小屏时为98%
variant	solid	variant 是 Button 显示颜色的类型
borderRadius	9999px	弧度为 9999px
color	#fff	字体颜色为#fff
_hover	background: ‘#C53030’	鼠标移上去，背景颜色是#C53030
_active	background: ‘#9B2C2C'	鼠标点击的那瞬间背景颜色是#9B2C2C

按钮左边放icon

<RedButton
  leftIcon={
    <AiFillGoogleSquare
      size='24px'
    />
  }
>
  这是一个红色按钮
</RedButton>

按钮右边放icon

<RedButton
  rightIcon={
    <AiFillGoogleSquare
      size='24px'
    />
  }
>
  这是一个红色按钮
</RedButton>

BlueButton 的 component 用法

BlueButton 能传入的参数

名称	描述
leftIcon	接收左边的自定义 icon
rightIcon	接收右边的自定义icon
children	Button的子集
...props	能接收到 chakra 的 Button 样式到 RedButton 里

BlueButton 里的 props

名称	默认	描述
size	lg	chakra 的 Button 宽度
w	{{ base: '98%', sm: '340px' }}	宽度当最小屏时为98%
variantColor	blue	variant 是 Button 显示颜色的类型
borderRadius	9999px	弧度为 9999px

按钮左边放icon

<BlueButton leftIcon={<AiFillGoogleSquare size='24px' />}>
  这是一个蓝色按钮
</BlueButton>

按钮右边放icon

<BlueButton rightIcon={<AiFillGoogleSquare size='24px' />}>
  这是一个蓝色按钮
</BlueButton>

ButtonGrid 的 component 用法

包裹着按钮的一个组件

ButtonGrid 能传入的参数

名称	描述
props	能接收 children 和 chakra 的 SimpleGrid 样式到 ButtonGrid

ButtonGrid 里的 props

名称	默认	描述
columns	1	一行只显示一个
spacing	16px	两个子集之间的距离
py	16px	在Y轴的外边距宽度
w	{{ base: '100%', sm: '340px' }}	宽度在最小屏时为100%

<ButtonGrid>
  <RedButton leftIcon={<AiFillGoogleSquare size='24px' />}>
    这是一个红色按钮
  </RedButton>
  <RedButton rightIcon={<AiFillGoogleSquare size='24px' />}>
    这是一个红色按钮
  </RedButton>
  <BlueButton leftIcon={<AiFillGoogleSquare size='24px' />}>
    这是一个蓝色按钮
  </BlueButton>
  <BlueButton rightIcon={<AiFillGoogleSquare size='24px' />}>
    这是一个蓝色按钮
  </BlueButton>
</ButtonGrid>

LargeTitle 的 component 用法

LargeTitle 能传入的参数

名称	说明
props	能接收 children 和 chakra 的 Heading 样式

LargeTitle 里的 props

名称	默认	描述
size	2xl	字体大小
w	100%	宽度为100%
mb	16px	底部内边距为16px
textAlign	center	字体居中

<LargeTitle>这是一个标题</LargeTitle>

FullScreenView 的 component 用法

FullScreenView 能传入的参数

名称	描述
closePath	点击右上角关闭按钮后要返回的路径
children	FullScreenView 的子集
...props	接收 chakra的 Box 样式到 FullScreenView 里

FullScreenView 的 props

名称	默认	描述
pos	fixed	固定定位
top	0	离上方0
left	0	离左边0
right	0	离右边0
bottom	0	离下边0
w	100%	宽 100%
h	100%	高100%
d	flex	display 为 flex
alignItems	center	字体垂直居中
justifyContent	flex-start	内容从 start 开始排列
flexDirection	column	flexDirection 从上到下排列
zIndex	4000	zIndex为4000
overflowY	auto	滚动条为auto

<FullScreenView closePath='/'>
  <LargeTitle>登入</LargeTitle>
  <ButtonGrid>
    <RedButton leftIcon={<AiFillGoogleSquare size='24px' />}>
      使用google登入
    </RedButton>
    <RedButton leftIcon={<AiFillGoogleSquare size='24px' />}>
      使用google登入
    </RedButton>
    <RedButton leftIcon={<AiFillGoogleSquare size='24px' />}>
      使用google登入
    </RedButton>
    <RedButton leftIcon={<AiFillGoogleSquare size='24px' />}>
      使用google登入
    </RedButton>
  </ButtonGrid>
</FullScreenView>

Crumb

相关组件

Crumb
CrumbLink：Breadcrumb的 link 元素。

import{ Crumb, CrumbLink } from 'viviui'
Crumb 和 CrumbLink 需要一起使用

Crumb 能传入的参数

名称	描述
children	Crumb 的儿子
...props	接受chakra 的 Breadcrumb 样式到 Crumb 里

Crumb 的 Props

名称	默认	描述
spacing	8px	子集之间的距离
separator		子集之间的icon

CrumbLink 能传入的参数

名称	描述
props	能接受 children chakra 的 BreadcrumbLink 到 CrumbLink 里

CrumbLink 的 Props

名称	默认	描述
color	#1b6ac9	字体颜色
fontWeight	bold	字体加粗

<Crumb>
    <CrumbLink>vivi</CrumbLink>
    <CrumbLink>vivi</CrumbLink>
    <CrumbLink>vivi</CrumbLink>
</Crumb>

viviui

This is a Test project

观看效果网址

Header使用

Hero

FeatureGrid

ModalSelector

ModalSelector

Fieldset

Group

page

FullScreenView

Crumb

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

viviui

This is a Test project

观看效果网址

Header使用

Hero

FeatureGrid

ModalSelector

ModalSelector

Fieldset

Group

page

FullScreenView

Crumb

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads