viviui v1.7.3

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 能传入的参数

HeaderButton里的Props

• 有 icon 的 HeaderButton

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

• 没有 icon 的 HeaderButton

<HeaderButton title='首页' />

HeaderMenuButton 的 Component 用法

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

HeaderMenuButton 传入的参数

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

能接受的参数

props

DrawerItemHeader

DrawerItemDivider

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 用法

props

containerProps

1. 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>
  }
/>

2. 传入 logo center right 的数据案例

网页版

手机版

• 点击menu前

• 点击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>
  }

  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 能传入的参数

props

1. 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 能傳入的參數

SquareButton 裏的 props

新增按鈕

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

EditButton

EditButton 能傳入的參數

<EditButton icon='edit' />

ModalSelector

ModalSelector 能傳入的參數

ModalSelector 裏的 props

點擊中間前

點擊中間后

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 能傳入的參數

SquareButton 裏的 props

新增按鈕

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

EditButton

EditButton 能傳入的參數

<EditButton icon='edit' />

ModalSelector

ModalSelector 能傳入的參數

ModalSelector 裏的 props

• 點擊中間前

• 點擊中間后

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 傳入的參數

LeftFieldsetButton 的 props

<LeftFieldsetButton>新增</LeftFieldsetButton>

Fieldset 的 Component 用法

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

Fieldset 傳入的參數

Fieldset 的 props

• 左邊沒有按鈕時

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

• 左邊有按鈕

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

Group

相關組件

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

import {
  Group,
  Card
} from "viviui"

用法

Card 的 component 的用法

Card 接收的參數

Card 的 props

<Card title="甲班" />

Group 的 Component 用法

Group 能接受到的值

Group 的 props

• 最大屏時

• 小屏時

• 最小屏時

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 接收的參數

HeaderPage 的 props

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

<HeaderPage>這是HeaderPage component</HeaderPage>

BackButton 的 component 用法

BackButton 接收的參數

BackButton 的 props

點擊前

點擊下去不動的時候

<BackButton>返回</BackButton>

DeleteIconButton 的 component 用法

DeleteIconButton 接收的參數

DeleteIconButton 的 props

<DeleteIconButton />

DeleteRemind 的 component 用法

DeleteRemind接收的參數

DeleteRemind 的 props

網頁版

手機版

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

LabelName、Row 的 component 用法

• LabelName 和 Row 的 component 需要一起用

LabelName 的 component 用法

LabelName 接收的參數

LabelName 的props

Row 的 component 用法

Row 接收的參數

Row 的 props

網頁版

手機版

<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 接收的參數

ColumnIconText 的 listIconProps

ColumnIconText 的 listIconProps

ColumnIconText 的 dividerProps

Management 的 component 用法

Management 接收的參數

Management 的 descriptionProps

<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 傳入的參數

NewButton 的 props

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

SureButton 的 component 用法

SureButton 傳入的參數

SureButton 的 props

<SureButton>確認</SureButton>

Page 的 component 用法

Page 能傳入的參數

网页版

手机版

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 能传入的值

Table 的 props

• TableHead

TableHead 能传入的值

• TableBody

TableBody 能传入的值

• TableRow

TableRow 能传入的值

TableRow 的 props

网页版

手机版

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 能传入的参数

RedButton 里的 props

• 按钮左边放icon

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

• 按钮右边放icon

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

BlueButton 的 component 用法

BlueButton 能传入的参数

BlueButton 里的 props

• 按钮左边放icon

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

• 按钮右边放icon

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

ButtonGrid 的 component 用法

• 包裹着按钮的一个组件

ButtonGrid 能传入的参数

ButtonGrid 里的 props

<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 能传入的参数

LargeTitle 里的 props

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

FullScreenView 的 component 用法

FullScreenView 能传入的参数

FullScreenView 的 props

<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 能传入的参数

Crumb 的 Props

CrumbLink 能传入的参数

CrumbLink 的 Props

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