kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-05-13 02:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve the copywriting content of the document (#571)

Browse Source 
* docs: export individual style types for each component

* docs: improve the copywriting content of the document

* docs: optimize the document site experience on mobile devices
This commit is contained in:
witt
2021-06-26 23:49:06 +08:00
committed by GitHub
parent 277f7e3992
commit dacd95987f
48 changed files with 499 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/use-toasts/index.ts
View File

@@ -1,4 +1,4 @@
import useToasts from './use-toast'
export type { ToastAction, Toast, ToastType } from './use-toast'
export type { ToastAction, Toast, ToastTypes } from './use-toast'
export default useToasts

4
components/use-toasts/use-toast.tsx
View File

@@ -10,10 +10,10 @@ export interface ToastAction {
handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void
passive?: boolean
}
export type ToastType = NormalTypes
export type ToastTypes = NormalTypes
export interface Toast {
text?: string | React.ReactNode
type?: ToastType
type?: ToastTypes
delay?: number
actions?: Array<ToastAction>
}

14
lib/components/layout.tsx
View File

@@ -62,7 +62,6 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
display: flex;
box-sizing: border-box;
}
.sidebar {
width: 200px;
margin-right: 20px;
@@ -76,13 +75,11 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
transition: transform 200ms ease-out;
z-index: 100;
}
.side-shadow {
width: 220px;
flex-shrink: 0;
height: 100vh;
}
.main {
display: flex;
max-width: calc(100% - 220px);
@@ -97,7 +94,7 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
.layout {
max-width: 100%;
width: 100%;
padding: 5rem 1rem;
padding: 20px 1rem;
}
.sidebar {
@@ -107,11 +104,14 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(
right: 0;
z-index: 10;
width: 100vw;
height: ${expanded ? '100vh' : '0'};
background-color: ${theme.palette.background};
padding: 0;
box-sizing: border-box;
height: ${expanded ? '90vh' : '0'};
background-color: transparent;
backdrop-filter: invert(15%) blur(5px);
padding: var(--geist-page-nav-height) 0 0 0;
overflow: hidden;
transition: height 250ms ease;
box-shadow: ${expanded ? theme.expressiveness.shadowSmall : 'none'};
}
.main {

2
lib/components/menu/menu-links.tsx
View File

@@ -33,7 +33,7 @@ const MenuLinks = () => {
position: relative;
margin: 0 auto;
padding: 0 ${theme.layout.gap};
height: 60px;
height: var(--geist-page-nav-height);
}
.site-name {

38
lib/components/menu/menu-sticker.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useMemo } from 'react'
import { Tabs, useTheme } from 'components'
import { useMediaQuery, Tabs, useTheme } from 'components'
import useCurrentState from 'components/utils/use-current-state'
import Router from 'next/router'
import Metadatas from 'lib/data'
@@ -12,10 +12,13 @@ const MenuSticker = () => {
const { tabbar: currentUrlTabValue, locale } = useLocale()
const [tabValue, setTabValue, tabValueRef] = useCurrentState<string>('')
const [fixed, setFixed, fixedRef] = useCurrentState<boolean>(false)
const isSM = useMediaQuery('sm', { match: 'down' })
const isXS = useMediaQuery('xs', { match: 'down' })
const isFixedTabs = fixed && !isXS
const tabbarData = useMemo(() => Metadatas[locale], [locale])
useEffect(() => updateTabbarFixed(fixed), [fixed])
useEffect(() => updateTabbarFixed(isFixedTabs), [isFixedTabs])
useEffect(() => setTabValue(currentUrlTabValue), [currentUrlTabValue])
useEffect(() => {
const scrollHandler = () => {
@@ -36,15 +39,18 @@ const MenuSticker = () => {
return (
<>
<div className={`nav-fill ${fixed ? 'active' : ''}`} />
<nav className={fixed ? 'fixed' : ''}>
<div className={`nav-fill ${isFixedTabs ? 'active' : ''}`} />
<nav className={isFixedTabs ? 'fixed' : ''}>
<div className="sticker">
<div className="inner">
<Tabs height="46px" value={tabValue} onChange={val => setTabValue(val)}>
<div className={`inner ${isSM && 'sm'}`}>
<Tabs
height="calc(var(--geist-page-tab-height) - 2px)"
value={tabValue}
onChange={val => setTabValue(val)}>
{tabbarData
? tabbarData.map((tab, index) => (
<Tabs.Item
height="46px"
height="calc(var(--geist-page-tab-height) - 2px)"
font="14px"
py={0}
label={tab.localeName || tab.name}
@@ -68,14 +74,14 @@ const MenuSticker = () => {
}
.nav-fill.active {
height: 48px;
height: var(--geist-page-tab-height);
visibility: visible;
}
nav {
position: relative;
width: 100%;
height: 48px;
height: var(--geist-page-tab-height);
background-color: ${theme.palette.background};
}
@@ -113,6 +119,20 @@ const MenuSticker = () => {
margin: 0 auto;
}
.inner.sm {
width: 100%;
}
.inner.sm :global(.tab) {
width: 33.333%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0;
}
.inner.sm :global(.tab.active) {
background-color: ${theme.palette.accents_2};
}
.inner :global(.content) {
display: none;
}

13
lib/components/sidebar/active-catalog.tsx
View File

@@ -27,6 +27,19 @@ const ActiveCatalog: React.FC<Props> = React.memo(({ name, localeName, ...props
.active {
color: ${theme.palette.foreground};
}
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
span {
letter-spacing: 0.3px;
display: inline-block;
font-weight: 800;
font-size: 17px;
padding: 15px 10px 10px;
width: 100%;
text-align: center;
color: ${theme.palette.accents_6};
}
}
`}</style>
</span>
)

26
lib/components/sidebar/active-link.tsx
View File

@@ -20,7 +20,7 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
const isActive = pathname === href
return (
<div className="link">
<div className={`link ${isActive ? 'active' : ''}`}>
<Link href={href}>
<a className={isActive ? 'active' : ''}>
{title}
@@ -61,6 +61,30 @@ const ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {
color: ${theme.palette.accents_4};
font-weight: 400;
}
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
.link {
background-color: ${theme.palette.accents_1};
margin-bottom: 22px;
padding: 0 25px;
border-radius: 30px;
height: 64px;
user-select: none;
}
.link.active {
border: 8px solid ${theme.palette.accents_5};
background-color: ${theme.palette.background};
}
a {
font-weight: bold;
font-size: 22px;
color: ${theme.palette.accents_6};
}
a.active {
font-size: 22px;
color: ${theme.palette.accents_5};
}
}
`}</style>
</div>
)

2
lib/components/sidebar/index.tsx
View File

@@ -76,7 +76,7 @@ export const Sidebar: React.FC<Props> = React.memo(() => {
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
.box {
padding: calc(3.5 * ${theme.layout.gap}) 15vw;
padding: 20px 35px 10px;
width: 100vw;
height: 100%;
}

21
lib/components/sidebar/tabbar-mobile.tsx
View File

@@ -15,9 +15,9 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
return (
<div className="tabbar">
<Button className="toggle" auto type="abort" onClick={handler}>
<SlidersIcon size={16} />
<SlidersIcon size={14} />
</Button>
<span>Geist UI</span>
<span className="geist-ui">Geist UI</span>
<style jsx>{`
.tabbar {
position: fixed;
@@ -25,14 +25,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
left: 0;
right: 0;
z-index: 950;
height: 3.7rem;
background-color: ${theme.palette.background};
height: var(--geist-page-nav-height);
background-color: ${theme.palette.accents_1};
display: flex;
align-items: center;
padding: 0 calc(${theme.layout.gap} * 2);
padding: 0 20px;
box-sizing: border-box;
justify-content: space-between;
border-bottom: 1px solid ${theme.palette.border};
box-shadow: ${theme.expressiveness.shadowSmall};
}
.tabbar :global(.toggle) {
@@ -45,11 +46,15 @@ const TabbarMobile: React.FC<Props> = ({ onClick }) => {
color: ${theme.palette.accents_6};
}
span {
color: ${theme.palette.accents_7};
font-size: 0.75rem;
.geist-ui {
color: ${theme.palette.foreground};
font-size: 17px;
font-weight: bold;
padding-right: 5px;
display: inline-flex;
text-transform: capitalize;
user-select: none;
letter-spacing: 0.4px;
}
@media only screen and (min-width: ${theme.layout.breakpointMobile}) {

2
lib/data/metadata-en-us.json
View File

File diff suppressed because one or more lines are too long

15
pages/_app.tsx
View File

@@ -72,51 +72,44 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
<Component {...pageProps} />
</ConfigContext>
<style global jsx>{`
html {
--geist-page-nav-height: 60px;
--geist-page-tab-height: 48px;
}
.tag {
color: ${theme.palette.accents_5};
}
.punctuation {
color: ${theme.palette.accents_5};
}
.attr-name {
color: ${theme.palette.accents_6};
}
.attr-value {
color: ${theme.palette.accents_4};
}
.language-javascript {
color: ${theme.palette.accents_4};
}
span.class-name {
color: ${theme.palette.warning};
}
span.maybe-class-name {
color: ${theme.palette.purple};
}
span.token.string {
color: ${theme.palette.accents_5};
}
span.keyword {
color: ${theme.palette.success};
}
span.plain-text {
color: ${theme.palette.accents_3};
}
body::-webkit-scrollbar {
width: 0;
background-color: ${theme.palette.accents_1};
}
body::-webkit-scrollbar-thumb {
background-color: ${theme.palette.accents_2};
border-radius: ${theme.layout.radius};

46
pages/en-us/components/auto-complete.mdx
View File

@@ -3,7 +3,7 @@ import { AutoComplete, Spacer, Badge, Grid, Text, Code } from 'components'
import { useState, useRef, useEffect } from 'react'
export const meta = {
title: 'Autocomplete',
title: 'AutoComplete',
group: 'Data Entry',
}
@@ -265,25 +265,25 @@ AutoComplete control of input field.
<Attributes edit="/pages/en-us/components/auto-complete.mdx">
<Attributes.Title>AutoComplete.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| --------------------- | ----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
| **options** | options of input | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
| **type** | input type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **initialValue** | initial value | `string` | - | - |
| **value** | current value | `string` | - | - |
| **width** | container width | `string` | - | - |
| **clearable** | show clear icon | `boolean` | - | `false` |
| **searching** | show loading icon for search | `boolean` | - | `false` |
| **onChange** | value of input is changed | `(value: string) => void` | - | - |
| **onSearch** | called when searching items | `(value: string) => void` | - | - |
| **onSelect** | called when a option is selected | `(value: string) => void` | - | - |
| **dropdownClassName** | className of dropdown box | `string` | - | - |
| **dropdownStyle** | style of dropdown box | `object` | - | - |
| **disableMatchWidth** | disable Option from follow parent width | `boolean` | - | `false` |
| **disableFreeSolo** | only values can be changed through Select | `boolean` | - | `false` |
| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement` | - | `body` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| --------------------- | ----------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------ | --------- |
| **options** | options of input | `AutoCompleteOptions` | [AutoCompleteOptions](#type-autocompleteoptions) | - |
| **type** | input type | `AutoCompleteTypes` | [AutoCompleteTypes](#autocompletetypes) | `default` |
| **initialValue** | initial value | `string` | - | - |
| **value** | current value | `string` | - | - |
| **width** | container width | `string` | - | - |
| **clearable** | show clear icon | `boolean` | - | `false` |
| **searching** | show loading icon for search | `boolean` | - | `false` |
| **onChange** | value of input is changed | `(value: string) => void` | - | - |
| **onSearch** | called when searching items | `(value: string) => void` | - | - |
| **onSelect** | called when a option is selected | `(value: string) => void` | - | - |
| **dropdownClassName** | className of dropdown box | `string` | - | - |
| **dropdownStyle** | style of dropdown box | `object` | - | - |
| **disableMatchWidth** | disable Option from follow parent width | `boolean` | - | `false` |
| **disableFreeSolo** | only values can be changed through Select | `boolean` | - | `false` |
| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement` | - | `body` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', ...` | - |
<Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>
@@ -314,6 +314,12 @@ Array<{
} | AutoComplete.Item>
```
<Attributes.Title>AutoCompleteTypes</Attributes.Title>
```ts
type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>
export default ({ children }) => <Layout meta={meta}>{children}</Layout>

6
pages/en-us/components/badge.mdx
View File

@@ -106,7 +106,7 @@ Display an indicator that requires attention.
| Attribute | Description | Type | Accepted values | Default |
| --------- | --------------------------- | ---------------- | ------------------------------- | --------- |
| **type** | badge type | `NormalTypes` | [NormalTypes](#normaltypes) | `default` |
| **type** | badge type | `BadgeTypes` | [BadgeTypes](#badgetypes) | `default` |
| **dot** | show dot and ignore content | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |
@@ -117,10 +117,10 @@ Display an indicator that requires attention.
| **placement** | fixe position of Badge | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |
| ... | native props | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>BadgeTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>AnchorPlacement</Attributes.Title>

32
pages/en-us/components/button-dropdown.mdx
View File

@@ -92,22 +92,28 @@ Display related but alternate actions for a button.
<Attributes edit="/pages/en-us/components/button-dropdown.mdx">
<Attributes.Title>ButtonDropdown.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ------------------------- | ---------------- | ------------------------------------------------------- | --------- |
| **type** | button type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **loading** | display loading indicator | `boolean` | - | `false` |
| **auto** | autoscale width | `boolean` | - | `false` |
| **disabled** | disable button | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ------------------------- | --------------------- | ------------------------------------------- | --------- |
| **type** | button type | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
| **loading** | display loading indicator | `boolean` | - | `false` |
| **auto** | autoscale width | `boolean` | - | `false` |
| **disabled** | disable button | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ----------- | --------------- | ---------------------- | ------------------------------------------------------- | --------- |
| **type** | button type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **main** | the main action | `boolean` | - | `false` |
| **onClick** | event handler | `MouseEventHandler` | - | - |
| ... | native props | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ----------- | --------------- | ---------------------- | ------------------------------------------- | --------- |
| **type** | button type | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
| **main** | the main action | `boolean` | - | `false` |
| **onClick** | event handler | `MouseEventHandler` | - | - |
| ... | native props | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...` | - |
<Attributes.Title>ButtonDropdownTypes</Attributes.Title>
```ts
type ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

4
pages/en-us/components/card.mdx
View File

@@ -35,8 +35,8 @@ A common container component.
scope={{ Card }}
code={`
<Card shadow>
<h4>The Evil Rabbit</h4>
<p>shadow card.</p>
<h4>HTTP is extensible</h4>
<p>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</p>
</Card>
`}
/>

36
pages/en-us/components/checkbox.mdx
View File

@@ -84,30 +84,30 @@ Displays a boolean value.
<Attributes edit="/pages/en-us/components/checkbox.mdx">
<Attributes.Title>Checkbox.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ------------------ | ------------------------------------------- | ---------------------------------------------- | ----------------------------- | --------- |
| **checked** | checked or not | `boolean` | - | - |
| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
| **onChange** | change event handler | `CheckboxEvent` | - | - |
| **value** | unique identification value (only in group) | `string` | - | - |
| **disabled** | disable checkbox | `boolean` | - | `false` |
| **type** | current type | `NormalTypes` | [CheckboxType](#checkboxtype) | `default` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ------------------ | ------------------------------------------- | ---------------------------------------------- | ------------------------------- | --------- |
| **checked** | checked or not | `boolean` | - | - |
| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
| **onChange** | change event handler | `CheckboxEvent` | - | - |
| **value** | unique identification value (only in group) | `string` | - | - |
| **disabled** | disable checkbox | `boolean` | - | `false` |
| **type** | current type | `CheckboxTypes` | [CheckboxTypes](#checkboxtypes) | `default` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `LabelHTMLAttributes` | `'form' ...` | - |
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ---------------------- | ---------------------------- | ------------------------ | ------- |
| **value** | checked children | `Array<string>` | - | `[]` |
| **disabled** | disable checkbox group | `boolean` | - | `false` |
| **onChange** | change event handler | `(values: string[]) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ---------------------- | ---------------------------- | --------------- | ------- |
| **value** | checked children | `Array<string>` | - | `[]` |
| **disabled** | disable checkbox group | `boolean` | - | `false` |
| **onChange** | change event handler | `(values: string[]) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'id', ...` | - |
<Attributes.Title>CheckboxType</Attributes.Title>
<Attributes.Title>CheckboxTypes</Attributes.Title>
```ts
type CheckboxType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type CheckboxTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>CheckboxEvent</Attributes.Title>

14
pages/en-us/components/dot.mdx
View File

@@ -37,10 +37,16 @@ Display an indicator of standardization status.
<Attributes edit="/pages/en-us/components/dot.mdx">
<Attributes.Title>Dot.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| --------- | ------------ | ---------------- | ------------------------------------------------------- | --------- |
| **type** | dot type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| ... | native props | `HTMLAttributes` | - | - |
| Attribute | Description | Type | Accepted values | Default |
| --------- | ------------ | ---------------- | --------------------- | --------- |
| **type** | dot type | `DotTypes` | [DotTypes](#dottypes) | `default` |
| ... | native props | `HTMLAttributes` | - | - |
<Attributes.Title>DotTypes</Attributes.Title>
```ts
type DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

38
pages/en-us/components/fieldset.mdx
View File

@@ -16,11 +16,11 @@ Display a collection of related information in a single unit.
scope={{ Fieldset, Button }}
code={`
<Fieldset>
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
<Fieldset.Title>HTTP is simple</Fieldset.Title>
<Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</Fieldset.Subtitle>
<Fieldset.Footer>
The Evil Rabbit Jumped over the Fence
<Button auto scale={1/3}>Actions</Button>
HTTP Knowledge Base
<Button auto scale={1/3}>OK</Button>
</Fieldset.Footer>
</Fieldset>
`}
@@ -32,8 +32,8 @@ Display a collection of related information in a single unit.
scope={{ Fieldset, Button, Text }}
code={`
<Fieldset>
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
<Fieldset.Title>HTTP is extensible</Fieldset.Title>
<Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. </Fieldset.Subtitle>
<Fieldset.Footer>
<Text type="error">An error has occurred.</Text>
<Button auto scale={1/3} type="error">Revert</Button>
@@ -50,28 +50,28 @@ Display a collection of related information in a single unit.
() => {
const handler = v => console.log(v)
return (
<Fieldset.Group value="two" onChange={handler}>
<Fieldset label="one">
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
<Fieldset.Group value="extensible" onChange={handler}>
<Fieldset label="simple">
<Fieldset.Title>HTTP is simple</Fieldset.Title>
<Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames.</Fieldset.Subtitle>
<Fieldset.Footer>
The Evil Rabbit Jumped over the Fence
HTTP Knowledge Base
<Button auto scale={1/3}>Actions</Button>
</Fieldset.Footer>
</Fieldset>
<Fieldset label="two">
<Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
<Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
<Fieldset label="extensible">
<Fieldset.Title>HTTP is extensible</Fieldset.Title>
<Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Fieldset.Subtitle>
<Fieldset.Footer>
The Fence Jumped over The Evil Rabbit
HTTP Knowledge Base
<Button auto scale={1/3}>Actions</Button>
</Fieldset.Footer>
</Fieldset>
<Fieldset label="three">
<Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
<Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
<Fieldset label="stateless">
<Fieldset.Title>HTTP is stateless</Fieldset.Title>
<Fieldset.Subtitle>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. </Fieldset.Subtitle>
<Fieldset.Footer>
The Fence Jumped over The Evil Rabbit
HTTP Knowledge Base
<Button auto scale={1/3}>Actions</Button>
</Fieldset.Footer>
</Fieldset>

32
pages/en-us/components/input.mdx
View File

@@ -16,7 +16,7 @@ Retrieve text input from a user.
desc="Basic input field."
scope={{ Input }}
code={`
<Input placeholder="The Evil Rabbit" />
<Input placeholder="Geist UI" />
`}
/>
@@ -39,7 +39,7 @@ Retrieve text input from a user.
desc="Specify width or other styles."
scope={{ Input }}
code={`
<Input placeholder="The Evil Rabbit" width="100%" />
<Input placeholder="Geist UI" width="100%" />
`}
/>
@@ -62,7 +62,7 @@ Retrieve text input from a user.
scope={{ Input, Spacer }}
code={`
<>
<Input label="username" placeholder="The Evil Rabbit" />
<Input label="username" placeholder="Geist UI" />
<Spacer h={.5} />
<Input labelRight=".com" placeholder="https://github" />
</>
@@ -75,7 +75,7 @@ Retrieve text input from a user.
scope={{ Input, Spacer, Text, Code, Dot }}
code={`
<>
<Input placeholder="Evil Rabbit">
<Input placeholder="Geist UI">
Username
</Input>
<Spacer />
@@ -98,13 +98,13 @@ Retrieve text input from a user.
scope={{ Input, Spacer }}
code={`
<>
<Input type="secondary" initialValue="The Evil Rabbit" />
<Input type="secondary" initialValue="Geist UI" />
<Spacer h={.5} />
<Input type="success" initialValue="The Evil Rabbit" />
<Input type="success" initialValue="Geist UI" />
<Spacer h={.5} />
<Input type="warning" initialValue="The Evil Rabbit" />
<Input type="warning" initialValue="Geist UI" />
<Spacer h={.5} />
<Input type="error" initialValue="The Evil Rabbit" />
<Input type="error" initialValue="Geist UI" />
</>
`}
/>
@@ -128,7 +128,7 @@ Retrieve text input from a user.
scope={{ Input }}
code={`
<>
<Input clearable initialValue="The Evil Rabbit" placeholder="The Evil Rabbit" />
<Input clearable initialValue="Geist UI" placeholder="Geist UI" />
</>
`}
/>
@@ -153,7 +153,7 @@ Retrieve text input from a user.
console.log(e.target.value)
}
return (
<Input value={value} onChange={handler} placeholder="The Evil Rabbit" />
<Input value={value} onChange={handler} placeholder="Geist UI" />
)
}
`}
@@ -169,7 +169,7 @@ Retrieve text input from a user.
scope={{ Input, useInput, useEffect, Button, Spacer }}
code={`
() => {
const { state, setState, reset, bindings } = useInput('The Evil Rabbit')
const { state, setState, reset, bindings } = useInput('Geist UI')
useEffect(() => console.log(state), [state])
return (
<>
@@ -212,7 +212,7 @@ Retrieve text input from a user.
| **value** | input value | `string` | - | - |
| **initialValue** | initial value | `string` | - | - |
| **placeholder** | placeholder | `string` | - | - |
| **type** | current type | `NormalTypes` | [InputType](#inputtype) | `default` |
| **type** | current type | `InputTypes` | [InputTypes](#inputtypes) | `default` |
| **htmlType** | native type attr | `string` | - | `text` |
| **readOnly** | native attr | `boolean` | - | `false` |
| **disabled** | disable input | `boolean` | - | `false` |
@@ -235,18 +235,16 @@ Retrieve text input from a user.
| **hideToggle** | hide toggle icon | `boolean` | - | `false` |
| ... | input props | `Input.Props` | [Input.Props](#input.props) | - |
<Attributes.Title>InputType</Attributes.Title>
<Attributes.Title>InputTypes</Attributes.Title>
```ts
type InputType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>useInput</Attributes.Title>
```ts
type useInput = (
initialValue: string,
) => {
type useInput = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>

18
pages/en-us/components/link.mdx
View File

@@ -14,7 +14,7 @@ Hyperlinks between pages.
<Playground
scope={{ Link }}
code={`
<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#">HTTP is stateless, but not sessionless.</Link>
`}
/>
@@ -23,7 +23,7 @@ Hyperlinks between pages.
desc="Distinguish links with different colors."
scope={{ Link }}
code={`
<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" color>HTTP is stateless, but not sessionless.</Link>
`}
/>
@@ -33,9 +33,9 @@ Hyperlinks between pages.
scope={{ Link, Spacer }}
code={`
<>
<Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" icon>HTTP is stateless, but not sessionless.</Link>
<Spacer h={.5} />
<Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" icon color>HTTP is stateless, but not sessionless.</Link>
</>
`}
/>
@@ -46,10 +46,10 @@ Hyperlinks between pages.
scope={{ Link, Text }}
code={`
<>
<Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#">HTTP is stateless, but not sessionless.</Link></Text>
<Text><Link href="#" color>HTTP is stateless, but not sessionless.</Link></Text>
<Text><Link href="#" underline>HTTP is stateless, but not sessionless.</Link></Text>
<Text><Link href="#" color underline>HTTP is stateless, but not sessionless.</Link></Text>
</>
`}
/>
@@ -59,7 +59,7 @@ Hyperlinks between pages.
desc="Display as a separate block."
scope={{ Link }}
code={`
<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" block>HTTP is stateless, but not sessionless.</Link>
`}
/>

6
pages/en-us/components/loading.mdx
View File

@@ -69,15 +69,15 @@ Indicate an action running in the background.
| Attribute | Description | Type | Accepted values | Default |
| -------------- | ---------------------------------- | ---------------- | --------------------------------- | --------- |
| **type** | bg-color type | `NormalTypes` | [NormalTypes](#mormaltypes) | `default` |
| **type** | bg-color type | `LoadingTypes` | [LoadingTypes](#loadingtypes) | `default` |
| **color** | custom bg color | `string` | - | - |
| **spaceRatio** | percentage of space between points | `number` | - | 1 |
| ... | native props | `HTMLAttributes` | `'id', 'title', 'className', ...` | - |
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>LoadingTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

18
pages/en-us/components/note.mdx
View File

@@ -79,12 +79,18 @@ Display text that requires attention or provides additional information.
<Attributes edit="/pages/en-us/components/note.mdx">
<Attributes.Title>Note.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ---------- | ------------------------- | -------------------- | ------------------------------------------------------- | --------- |
| **type** | note type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **label** | show label or custom text | `boolean` / `string` | - | - |
| **filled** | fill color | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ---------- | ------------------------- | -------------------- | ------------------------ | --------- |
| **type** | note type | `NoteTypes` | [NoteTypes](#nodetypes) | `default` |
| **label** | show label or custom text | `boolean` / `string` | - | - |
| **filled** | fill color | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NoteTypes</Attributes.Title>
```ts
type NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

24
pages/en-us/components/progress.mdx
View File

@@ -74,15 +74,21 @@ Display progress relative to a limit or related to a task.
<Attributes edit="/pages/en-us/components/progress.mdx">
<Attributes.Title>Progress.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| --------------- | ---------------------- | --------------------------- | ------------------------------------------------------- | --------- |
| **value** | current value | `number` | - | 0 |
| **max** | max value | `number` | - | 100 |
| **fixedTop** | fix progress to top | `boolean` | - | `false` |
| **fixedBottom** | fix progress to bottom | `boolean` | - | `false` |
| **colors** | custom colors | `{ [key: number]: string }` | - | - |
| **type** | predefined state types | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| ... | native props | `ProgressHTMLAttributes` | `'aria-busy', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| --------------- | ---------------------- | --------------------------- | ------------------------------- | --------- |
| **value** | current value | `number` | - | 0 |
| **max** | max value | `number` | - | 100 |
| **fixedTop** | fix progress to top | `boolean` | - | `false` |
| **fixedBottom** | fix progress to bottom | `boolean` | - | `false` |
| **colors** | custom colors | `{ [key: number]: string }` | - | - |
| **type** | predefined state types | `ProgressTypes` | [ProgressTypes](#progresstypes) | `default` |
| ... | native props | `ProgressHTMLAttributes` | `'aria-busy', ...` | - |
<Attributes.Title>ProgressTypes</Attributes.Title>
```ts
type ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

24
pages/en-us/components/radio.mdx
View File

@@ -109,16 +109,16 @@ Provides single user input from a selection of options.
<Attributes edit="/pages/en-us/components/radio.mdx">
<Attributes.Title>Radio.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------ | --------- |
| **checked** | selected or not (in single) | `boolean` | - | `false` |
| **value** | unique ident value (in group) | `string` | - | - |
| **id** | native attr | `string` | - | - |
| **disabled** | disable current radio | `boolean` | - | `false` |
| **type** | current type | `NormalTypes` | [RadioType](#radiotype) | `default` |
| **onChange** | change event | `(e: RadioEvent) => void` | - | - |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------- | --------- |
| **checked** | selected or not (in single) | `boolean` | - | `false` |
| **value** | unique ident value (in group) | `string` | - | - |
| **id** | native attr | `string` | - | - |
| **disabled** | disable current radio | `boolean` | - | `false` |
| **type** | current type | `RadioTypes` | [RadioTypes](#radiotypes) | `default` |
| **onChange** | change event | `(e: RadioEvent) => void` | - | - |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>Radio.Group.Props</Attributes.Title>
@@ -137,10 +137,10 @@ Provides single user input from a selection of options.
| --------- | ------------ | ---------------- | ------------------------ | ------- |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>RadioType</Attributes.Title>
<Attributes.Title>RadioTypes</Attributes.Title>
```ts
type RadioType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type RadioTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

6
pages/en-us/components/select.mdx
View File

@@ -231,7 +231,7 @@ Display a dropdown list of items.
| **initialValue** | initial value | `string`, `string[]` | - | - |
| **placeholder** | placeholder string | `string` | - | - |
| **width** | css width value of select | `string` | - | `initial` |
| **type** | current type | `NormalTypes` | [SelectType](#selecttype) | `default` |
| **type** | current type | `SelectTypes` | [SelectTypes](#selecttypes) | `default` |
| **icon** | icon component | `ComponentType` | - | `SVG Component` |
| **pure** | remove icon component | `boolean` | - | `false` |
| **multiple** | support multiple selection | `boolean` | - | `false` |
@@ -252,10 +252,10 @@ Display a dropdown list of items.
| **disabled** | disable current option | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'name', 'id', 'className', ...` | - |
<Attributes.Title>SelectType</Attributes.Title>
<Attributes.Title>SelectTypes</Attributes.Title>
```ts
type SelectType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

6
pages/en-us/components/slider.mdx
View File

@@ -90,7 +90,7 @@ Display the current value and an inputable range.
| ---------------- | -------------------------------------------------- | ----------------------- | -------------------------------- | --------- |
| **initialValue** | initial value | `number` | - | 0 |
| **value** | slider value | `number` | - | 0 |
| **type** | current type | `NormalTypes` | [SliderType](#slidertype) | `default` |
| **type** | current type | `SliderTypes` | [SliderTypes](#slidertypes) | `default` |
| **step** | the granularity the slider can step through values | `number` | - | 1 |
| **max** | the maximum value of slider | `number` | - | 100 |
| **min** | the minimum value of slider | `number` | - | 0 |
@@ -100,10 +100,10 @@ Display the current value and an inputable range.
| **onChange** | called when the value of silder changes | `(val: number) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
<Attributes.Title>SliderType</Attributes.Title>
<Attributes.Title>SliderTypes</Attributes.Title>
```ts
type SliderType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type SliderTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

38
pages/en-us/components/snippet.mdx
View File

@@ -100,17 +100,17 @@ Display a snippet of copyable code for the command line.
<Attributes edit="/pages/en-us/components/snippet.mdx">
<Attributes.Title>Snippet.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ------------- | ----------------------- | ----------------------------- | -------------------------------- | ---------------------- |
| **text** | code snippet | `string` `Array<string>` | - | - |
| **type** | snippet types | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` |
| **filled** | filled style | `boolean` | - | `false` |
| **width** | set CSS string | `string` | - | `initial` |
| **copy** | function of copy button | `CopyTypes` | `'default', 'silent', 'prevent'` | `default` |
| **symbol** | symbol snippet | `string` | - | `$` |
| **toastText** | toast text | `string` | - | `Copied to clipboard!` |
| **toastType** | toast type | `NormalTypes` | [NormalTypes](#normaltypes) | `success` |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ------------- | ----------------------- | ------------------- | -------------------------------- | ---------------------- |
| **text** | code snippet | `string` `string[]` | - | - |
| **type** | snippet types | `SnippetTypes` | [SnippetTypes](#snippettypes) | `default` |
| **filled** | filled style | `boolean` | - | `false` |
| **width** | set CSS string | `string` | - | `initial` |
| **copy** | function of copy button | `CopyTypes` | [CopyTypes](#copytypes) | `default` |
| **symbol** | symbol snippet | `string` | - | `$` |
| **toastText** | toast text | `string` | - | `Copied to clipboard!` |
| **toastType** | toast type | `ToastTypes` | [ToastTypes](#toasttypes) | `success` |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
<Attributes.Title>SnippetTypes</Attributes.Title>
@@ -125,10 +125,22 @@ type SnippetTypes =
| 'lite'
```
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>CopyTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type CopyTypes = 'default' | 'silent' | 'prevent'
```
<Attributes.Title>SnippetTypes</Attributes.Title>
```ts
type SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>ToastTypes</Attributes.Title>
```ts
type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

18
pages/en-us/components/tabs.mdx
View File

@@ -18,8 +18,8 @@ Display tab content.
desc="Toggle display of different templates."
code={`
<Tabs initialValue="1">
<Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
<Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
<Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
<Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>
</Tabs>
`}
/>
@@ -29,7 +29,7 @@ Display tab content.
scope={{ Tabs }}
code={`
<Tabs initialValue="1">
<Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
<Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
<Tabs.Item label="jumped" value="2" disabled />
</Tabs>
`}
@@ -122,8 +122,8 @@ Display tab content.
<Button scale={1/3} onClick={switchHandler}><Text>Select <Code>Jumped</Code></Text></Button>
<Spacer h={.5} />
<Tabs value={value} onChange={changeHandler}>
<Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
<Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
<Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
<Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
</Tabs>
</>
)
@@ -149,8 +149,8 @@ Display tab content.
</Button>
<Spacer h={.5} />
<Tabs {...bindings}>
<Tabs.Item label="evil rabbit" value="1">The Evil Rabbit Jumped over the Fence.</Tabs.Item>
<Tabs.Item label="jumped" value="2">The Fence Jumped over The Evil Rabbit.</Tabs.Item>
<Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
<Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
</Tabs>
</>
)
@@ -180,9 +180,7 @@ Display tab content.
<Attributes.Title>useTabs</Attributes.Title>
```ts
type useTabs = (
initialValue: string,
) => {
type useTabs = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>

2
pages/en-us/components/text.mdx
View File

@@ -132,7 +132,7 @@ Display text using well-defined typographic styles.
| **em** | component name | `boolean` | - | `false` |
| **b** | component name | `boolean` | - | `false` |
| **blockquote** | component name | `boolean` | - | `false` |
| **type** | text type | `NormalTypes` | [TextTypes](#texttypes) | `default` |
| **type** | text type | `TextTypes` | [TextTypes](#texttypes) | `default` |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>TextTypes</Attributes.Title>

36
pages/en-us/components/textarea.mdx
View File

@@ -114,24 +114,22 @@ Retrieve multi-line user input.
<Attributes edit="/pages/en-us/components/textarea.mdx">
<Attributes.Title alias="Input.Textarea">Textarea.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| ---------------- | -------------- | -------------------------------- | ---------------------------------------------------------------- | --------- |
| **value** | textarea value | `string` | - | - |
| **initialValue** | textarea value | `string` | - | - |
| **placeholder** | placeholder | `string` | - | - |
| **type** | current type | `NormalTypes` | [TextareaType](#textareatype) | `default` |
| **readOnly** | native attr | `boolean` | - | `false` |
| **disabled** | disable input | `boolean` | - | `false` |
| **onChange** | change event | `(e: React.ChangeEvent) => void` | - | - |
| **resize** | CSS attribute | `string` | `'none', 'both', 'horizontal', 'vertical', 'initial', 'inherit'` | `none` |
| ... | native props | `TextareaHTMLAttributes` | `'form', 'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| ---------------- | -------------- | -------------------------------- | -------------------------------- | --------- |
| **value** | textarea value | `string` | - | - |
| **initialValue** | textarea value | `string` | - | - |
| **placeholder** | placeholder | `string` | - | - |
| **type** | current type | `TextareaTypes` | [TextareaTypes](#textareatypes) | `default` |
| **readOnly** | native attr | `boolean` | - | `false` |
| **disabled** | disable input | `boolean` | - | `false` |
| **onChange** | change event | `(e: React.ChangeEvent) => void` | - | - |
| **resize** | CSS attribute | `CSSResize` | [CSSResize](#cssresize) | `none` |
| ... | native props | `TextareaHTMLAttributes` | `'form', 'id', 'className', ...` | - |
<Attributes.Title>useInput</Attributes.Title>
```ts
type useInput = (
initialValue: string,
) => {
type useInput = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>
@@ -143,10 +141,16 @@ type useInput = (
}
```
<Attributes.Title>TextareaType</Attributes.Title>
<Attributes.Title>TextareaTypes</Attributes.Title>
```ts
type TextareaType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>CSSResize</Attributes.Title>
```ts
type CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'
```
</Attributes>

16
pages/en-us/components/toast.mdx
View File

@@ -16,7 +16,7 @@ Display an important message globally.
code={`
() => {
const [toasts, setToast] = useToasts()
const click = () => setToast({ text: 'The Evil Rabbit jumped over the fence.' })
const click = () => setToast({ text: 'HTTP is stateless, but not sessionless.' })
return <Button onClick={click}>Show Toast</Button>
}
`}
@@ -29,7 +29,7 @@ Display an important message globally.
code={`
() => {
const [toasts, setToast] = useToasts()
const click = () => setToast({ text: 'The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence. The Evil Rabbit jumped over the fence.' })
const click = () => setToast({ text: 'HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.' })
return <Button onClick={click}>Show Toast</Button>
}
`}
@@ -47,7 +47,7 @@ Display an important message globally.
handler: () => alert('alert from toast')
}
const click = () => setToast({
text: 'The Evil Rabbit jumped over the fence.',
text: 'HTTP is stateless, but not sessionless.',
actions: [action],
})
return <Button onClick={click} type="secondary">Show Action</Button>
@@ -68,7 +68,7 @@ Display an important message globally.
handler: (event, cancel) => cancel()
}
const click = () => setToast({
text: 'The Evil Rabbit jumped over the fence.',
text: 'HTTP is stateless, but not sessionless.',
actions: [action],
})
return <Button onClick={click}>Show Toast</Button>
@@ -83,7 +83,7 @@ Display an important message globally.
() => {
const [, setToast] = useToasts()
const click = type => setToast({
text: 'The Evil Rabbit jumped over the fence.',
text: 'HTTP is stateless, but not sessionless.',
type,
})
return (
@@ -109,7 +109,7 @@ const [toasts: Array<Toast>, setToast: (toast: Toast) => void] = useToasts()
```ts
interface Toast {
text?: string
type?: NormalTypes
type?: ToastTypes
delay?: number
actions?: Array<ToastAction>
}
@@ -125,10 +125,10 @@ interface ToastAction {
}
```
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>ToastTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

6
pages/en-us/components/toggle.mdx
View File

@@ -73,7 +73,7 @@ Displays a boolean value.
| **checked** | checked or not | `boolean` | - | - |
| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
| **onChange** | change event handler | `ToggleEvent` | - | - |
| **type** | current type | `NormalTypes` | [ToggleType](#toggletype) | `default` |
| **type** | current type | `ToggleTypes` | [ToggleTypes](#toggletypes) | `default` |
| **disabled** | disable toggle | `boolean` | - | `false` |
| ... | native props | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | - |
@@ -92,10 +92,10 @@ export interface ToggleEvent {
}
```
<Attributes.Title>ToggleType</Attributes.Title>
<Attributes.Title>ToggleTypes</Attributes.Title>
```ts
type ToggleType = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type ToggleTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

2
pages/en-us/components/tooltip.mdx
View File

@@ -119,7 +119,7 @@ Displays additional information on hover.
scope={{ Tooltip, Spacer, Grid }}
code={`
() => {
const text = 'The Evil Rabbit Jumped over the Fence'
const text = 'HTTP is stateless, but not sessionless'
return (
<Grid.Container gap={1.5} justify="center" alignItems="center">
<Grid xs={8} justify="flex-end">

2
pages/en-us/components/user.mdx
View File

@@ -14,7 +14,7 @@ Display user profile or social information.
desc="Show username."
scope={{ User, Spacer }}
code={`
<User src="/images/avatar.png" name="Evil Rabbit" />
<User src="/images/avatar.png" name="Witt" />
`}
/>

44
pages/zh-cn/components/auto-complete.mdx
View File

@@ -244,25 +244,25 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/auto-complete.mdx">
<Attributes.Title>AutoComplete.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| --------------------- | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
| **options** | 输入框的可选项 | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
| **status** | 输入框类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **initialValue** | 初始值 | `string` | - | - |
| **value** | 命令式的输入框的值 | `string` | - | - |
| **width** | 组件容器的宽度 | `string` | - | - |
| **clearable** | 是否显示清除按钮 | `boolean` | - | `false` |
| **searching** | 是否显示正在搜索中 | `boolean` | - | `false` |
| **onChange** | 输入框的值发生变化触发此事件 | `(value: string) => void` | - | - |
| **onSearch** | 搜索事件，当用户手动输入时触发 | `(value: string) => void` | - | - |
| **onSelect** | 当备选框被选中后触发的事件 | `(value: string) => void` | - | - |
| **dropdownClassName** | 自定义下拉框的类名 | `string` | - | - |
| **dropdownStyle** | 自定义下拉框的样式 | `object` | - | - |
| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度 | `boolean` | - | `false` |
| **disableFreeSolo** | 只允许通过 Select 事件更改值 (禁止 Input 输入随意值) | `boolean` | - | `false` |
| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement` | - | `body` |
| **ref** | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| --------------------- | ------------------------------------------------ | ------------------------------------------------ | --------------------------------------- | --------- |
| **options** | 输入框的可选项 | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
| **status** | 输入框类型 | `AutoCompleteTypes` | [AutoCompleteTypes](#autocompletetypes) | `default` |
| **initialValue** | 初始值 | `string` | - | - |
| **value** | 命令式的输入框的值 | `string` | - | - |
| **width** | 组件容器的宽度 | `string` | - | - |
| **clearable** | 是否显示清除按钮 | `boolean` | - | `false` |
| **searching** | 是否显示正在搜索中 | `boolean` | - | `false` |
| **onChange** | 输入框的值发生变化触发此事件 | `(value: string) => void` | - | - |
| **onSearch** | 搜索事件，当用户手动输入时触发 | `(value: string) => void` | - | - |
| **onSelect** | 当备选框被选中后触发的事件 | `(value: string) => void` | - | - |
| **dropdownClassName** | 自定义下拉框的类名 | `string` | - | - |
| **dropdownStyle** | 自定义下拉框的样式 | `object` | - | - |
| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度 | `boolean` | - | `false` |
| **disableFreeSolo** | 只允许 Select 事件更改值 (禁止 Input 输入随意值) | `boolean` | - | `false` |
| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement` | - | `body` |
| **ref** | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>
@@ -293,6 +293,12 @@ Array<{
} | AutoComplete.Item>
```
<Attributes.Title>AutoCompleteTypes</Attributes.Title>
```ts
type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>
export default ({ children }) => <Layout meta={meta}>{children}</Layout>

6
pages/zh-cn/components/badge.mdx
View File

@@ -106,7 +106,7 @@ export const meta = {
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| -------- | ------------------ | ---------------- | ------------------------------- | --------- |
| **type** | 徽章的类型 | `NormalTypes` | [NormalTypes](#normaltypes) | `default` |
| **type** | 徽章的类型 | `BadgeTypes` | [BadgeTypes](#badgetypes) | `default` |
| **dot** | 忽略内容并显示圆点 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |
@@ -117,10 +117,10 @@ export const meta = {
| **placement** | 固定徽章的位置 | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |
| ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>BadgeTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>AnchorPlacement</Attributes.Title>

32
pages/zh-cn/components/button-dropdown.mdx
View File

@@ -91,22 +91,28 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/button-dropdown.mdx">
<Attributes.Title>ButtonDropdown.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ------------ | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
| **type** | 按钮类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **loading** | 显示加载中的指示器 | `boolean` | - | `false` |
| **auto** | 自动缩放宽度 | `boolean` | - | `false` |
| **disabled** | 禁用所有按钮 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ------------ | ------------------ | --------------------- | ------------------------------------------- | --------- |
| **type** | 按钮类型 | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
| **loading** | 显示加载中的指示器 | `boolean` | - | `false` |
| **auto** | 自动缩放宽度 | `boolean` | - | `false` |
| **disabled** | 禁用所有按钮 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', ...` | - |
<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ----------- | ---------------- | ---------------------- | ------------------------------------------------------- | --------- |
| **type** | 当前单个按钮类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **main** | 是否为主要按钮 | `boolean` | - | `false` |
| **onClick** | 按钮的点击事件 | `MouseEventHandler` | - | - |
| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ----------- | ---------------- | ---------------------- | ------------------------------------------- | --------- |
| **type** | 当前单个按钮类型 | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |
| **main** | 是否为主要按钮 | `boolean` | - | `false` |
| **onClick** | 按钮的点击事件 | `MouseEventHandler` | - | - |
| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'name', ...` | - |
<Attributes.Title>ButtonDropdownTypes</Attributes.Title>
```ts
type ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

14
pages/zh-cn/components/dot.mdx
View File

@@ -37,10 +37,16 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/dot.mdx">
<Attributes.Title>Dot.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| -------- | -------- | ---------------- | ------------------------------------------------------- | --------- |
| **type** | 点的类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| ... | 原生属性 | `HTMLAttributes` | - | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| -------- | -------- | ---------------- | --------------------- | --------- |
| **type** | 点的类型 | `DotTypes` | [DotTypes](#dottypes) | `default` |
| ... | 原生属性 | `HTMLAttributes` | - | - |
<Attributes.Title>DotTypes</Attributes.Title>
```ts
type DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

49
pages/zh-cn/components/input.mdx
View File

@@ -170,7 +170,7 @@ export const meta = {
scope={{ Input, useInput, useEffect, Button, Spacer }}
code={`
() => {
const { state, setState, reset, bindings } = useInput('The Evil Rabbit')
const { state, setState, reset, bindings } = useInput('Geist UI')
useEffect(() => console.log(state), [state])
return (
<>
@@ -208,25 +208,26 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/input.mdx">
<Attributes.Title>Input.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ----------------- | -------------------- | ---------------------------------------------- | --------------------------- | --------- |
| **value** | 命令式设定输入框的值 | `string` | - | - |
| **initialValue** | 初始值 | `string` | - | - |
| **placeholder** | 占位文本 | `string` | - | - |
| **status** | 输入框状态 | `NormalTypes` | [InputStatus](#inputstatus) | `default` |
| **readOnly** | 是否设置输入框为只读 | `boolean` | - | `false` |
| **disabled** | 是否禁用输入框 | `boolean` | - | `false` |
| **clearable** | 是否展示清除按钮 | `boolean` | - | `false` |
| **label** | 文本标签 | `string` | - | - |
| **icon** | 输入框图标 | `React.ReactNode` | - | - |
| **labelRight** | 居于右侧的文本标签 | `string` | - | - |
| **iconRight** | 居于右侧的图标 | `React.ReactNode` | - | - |
| **iconClickable** | 图标是否可点击 | `boolean` | - | `false` |
| **onIconClick** | 图标点击事件 | `(e: React.ChangeEvent) => void` | - | - |
| **onChange** | 输入框变化事件 | `(e: React.ChangeEvent) => void` | - | - |
| **onClearClick** | 清除按钮的点击事件 | `(e: React.MouseEvent) => void` | - | - |
| **ref** | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ----------------- | --------------------- | ---------------------------------------------- | ------------------------- | --------- |
| **value** | 命令式设定输入框的值 | `string` | - | - |
| **initialValue** | 初始值 | `string` | - | - |
| **placeholder** | 占位文本 | `string` | - | - |
| **type** | 输入框状态 | `InputTypes` | [InputTypes](#inputtypes) | `default` |
| **htmlType** | 原生 HTML `type` 属性 | `string` | - | `text` |
| **readOnly** | 是否设置输入框为只读 | `boolean` | - | `false` |
| **disabled** | 是否禁用输入框 | `boolean` | - | `false` |
| **clearable** | 是否展示清除按钮 | `boolean` | - | `false` |
| **label** | 文本标签 | `string` | - | - |
| **icon** | 输入框图标 | `React.ReactNode` | - | - |
| **labelRight** | 居于右侧的文本标签 | `string` | - | - |
| **iconRight** | 居于右侧的图标 | `React.ReactNode` | - | - |
| **iconClickable** | 图标是否可点击 | `boolean` | - | `false` |
| **onIconClick** | 图标点击事件 | `(e: React.ChangeEvent) => void` | - | - |
| **onChange** | 输入框变化事件 | `(e: React.ChangeEvent) => void` | - | - |
| **onClearClick** | 清除按钮的点击事件 | `(e: React.MouseEvent) => void` | - | - |
| **ref** | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>Input.Password.Props</Attributes.Title>
@@ -235,18 +236,16 @@ export const meta = {
| **hideToggle** | 隐藏切换密码的按钮 | `boolean` | - | `false` |
| ... | 输入框组件属性 | `Input.Props` | [Input.Props](#input.props) | - |
<Attributes.Title>InputStatus</Attributes.Title>
<Attributes.Title>InputTypes</Attributes.Title>
```ts
type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>useInput</Attributes.Title>
```ts
type useInput = (
initialValue: string,
) => {
type useInput = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>

6
pages/zh-cn/components/loading.mdx
View File

@@ -69,15 +69,15 @@ export const meta = {
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| -------------- | ------------------ | ---------------- | --------------------------------- | --------- |
| **type** | 指示器的类型 | `NormalTypes` | [NormalTypes](#mormaltypes) | `default` |
| **type** | 指示器的类型 | `LoadingTypes` | [LoadingTypes](#loadingtypes) | `default` |
| **color** | 自定义指示器的色彩 | `string` | - | - |
| **spaceRatio** | 点之间的空间比例 | `number` | - | 1 |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - |
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>LoadingTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

18
pages/zh-cn/components/note.mdx
View File

@@ -79,12 +79,18 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/note.mdx">
<Attributes.Title>Note.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ---------- | ---------------------------- | -------------------- | ------------------------------------------------------- | --------- |
| **type** | 提示类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **label** | 是否显示标签，或是自定义标签 | `boolean` / `string` | - | - |
| **filled** | 填充色彩的变体提示框 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ---------- | ---------------------------- | ------------------ | ------------------------ | --------- |
| **type** | 提示类型 | `NoteTypes` | [NoteTypes](#nodetypes) | `default` |
| **label** | 是否显示标签，或是自定义标签 | `boolean / string` | - | - |
| **filled** | 填充色彩的变体提示框 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NoteTypes</Attributes.Title>
```ts
type NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

24
pages/zh-cn/components/progress.mdx
View File

@@ -74,15 +74,21 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/progress.mdx">
<Attributes.Title>Progress.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| --------------- | ------------------ | --------------------------- | ------------------------------------------------------- | --------- |
| **value** | 进度条当前数值 | `number` | - | 0 |
| **max** | 最大值 | `number` | - | 100 |
| **fixedTop** | 固定进度条在顶部 | `boolean` | - | `false` |
| **fixedBottom** | 固定进度条在底部 | `boolean` | - | `false` |
| **colors** | 在范围内自定义颜色 | `{ [key: number]: string }` | - | - |
| **type** | 预定义的状体类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| ... | 原生属性 | `ProgressHTMLAttributes` | `'aria-busy', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| --------------- | ------------------ | --------------------------- | ------------------------------- | --------- |
| **value** | 进度条当前数值 | `number` | - | 0 |
| **max** | 最大值 | `number` | - | 100 |
| **fixedTop** | 固定进度条在顶部 | `boolean` | - | `false` |
| **fixedBottom** | 固定进度条在底部 | `boolean` | - | `false` |
| **colors** | 在范围内自定义颜色 | `{ [key: number]: string }` | - | - |
| **type** | 预定义的状体类型 | `ProgressTypes` | [ProgressTypes](#progresstypes) | `default` |
| ... | 原生属性 | `ProgressHTMLAttributes` | `'aria-busy', 'className', ...` | - |
<Attributes.Title>ProgressTypes</Attributes.Title>
```ts
type ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

38
pages/zh-cn/components/snippet.mdx
View File

@@ -84,17 +84,17 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/snippet.mdx">
<Attributes.Title>Snippet.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ------------- | ------------------ | ----------------------------- | -------------------------------- | ---------------------- |
| **text** | 命令文本 | `string` `Array<string>` | - | - |
| **type** | 组件类型 | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` |
| **filled** | 填充风格的样式 | `boolean` | - | `false` |
| **width** | 设置 CSS 宽度 | `string` | - | `initial` |
| **copy** | 拷贝按钮的工作方式 | `CopyTypes` | `'default', 'silent', 'prevent'` | `default` |
| **symbol** | 组件左侧显示的字符 | `string` | - | `$` |
| **toastText** | 拷贝提示的字符 | `string` | - | `Copied to clipboard!` |
| **toastType** | 拷贝提示的类型 | `NormalTypes` | [NormalTypes](#normaltypes) | `success` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ------------- | ------------------ | ------------------------ | ----------------------------- | ---------------------- |
| **text** | 命令文本 | `string` `Array<string>` | - | - |
| **type** | 组件类型 | `SnippetTypes` | [SnippetTypes](#snippettypes) | `default` |
| **filled** | 填充风格的样式 | `boolean` | - | `false` |
| **width** | 设置 CSS 宽度 | `string` | - | `initial` |
| **copy** | 拷贝按钮的工作方式 | `CopyTypes` | [CopyTypes](#copytypes) | `default` |
| **symbol** | 组件左侧显示的字符 | `string` | - | `$` |
| **toastText** | 拷贝提示的字符 | `string` | - | `Copied to clipboard!` |
| **toastType** | 拷贝提示的类型 | `ToastTypes` | [ToastTypes](#toasttypes) | `success` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', ...` | - |
<Attributes.Title>SnippetTypes</Attributes.Title>
@@ -109,10 +109,22 @@ type SnippetTypes =
| 'lite'
```
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>CopyTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type CopyTypes = 'default' | 'silent' | 'prevent'
```
<Attributes.Title>SnippetTypes</Attributes.Title>
```ts
type SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>ToastTypes</Attributes.Title>
```ts
type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

2
pages/zh-cn/components/text.mdx
View File

@@ -132,7 +132,7 @@ export const meta = {
| **em** | 渲染元素类型 | `boolean` | - | `false` |
| **b** | 渲染元素类型 | `boolean` | - | `false` |
| **blockquote** | 渲染元素类型 | `boolean` | - | `false` |
| **type** | 文字类型 | `NormalTypes` | [TextTypes](#texttypes) | `default` |
| **type** | 文字类型 | `TextTypes` | [TextTypes](#texttypes) | `default` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>TextTypes</Attributes.Title>

38
pages/zh-cn/components/textarea.mdx
View File

@@ -115,24 +115,22 @@ export const meta = {
<Attributes edit="/pages/zh-cn/components/textarea.mdx">
<Attributes.Title alias="Input.Textarea">Textarea.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ---------------- | ------------------ | -------------------------------- | ---------------------------------------------------------------- | --------- |
| **value** | 设置文本框的值 | `string` | - | - |
| **initialValue** | 文本框的初始值 | `string` | - | - |
| **placeholder** | 占位文本 | `string` | - | - |
| **status** | 文本框当前状态 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **readOnly** | 是否以只读方式显示 | `boolean` | - | `false` |
| **disabled** | 是否禁用文本框 | `boolean` | - | `false` |
| **onChange** | 文本变化事件 | `(e: React.ChangeEvent) => void` | - | - |
| **resize** | CSS 属性 | `string` | `'none', 'both', 'horizontal', 'vertical', 'initial', 'inherit'` | `none` |
| ... | 原生属性 | `TextareaHTMLAttributes` | `'form', 'id', 'className', ...` | - |
| 属性 | 描述 | 类型 | 推荐值 | 默认 |
| ---------------- | ------------------ | -------------------------------- | -------------------------------- | --------- |
| **value** | 设置文本框的值 | `string` | - | - |
| **initialValue** | 文本框的初始值 | `string` | - | - |
| **placeholder** | 占位文本 | `string` | - | - |
| **status** | 文本框当前状态 | `TextareaTypes` | [TextareaTypes](#textareatypes) | `default` |
| **readOnly** | 是否以只读方式显示 | `boolean` | - | `false` |
| **disabled** | 是否禁用文本框 | `boolean` | - | `false` |
| **onChange** | 文本变化事件 | `(e: React.ChangeEvent) => void` | - | - |
| **resize** | CSS 属性 | `CSSResize` | [CSSResize](#cssresize) | `none` |
| ... | 原生属性 | `TextareaHTMLAttributes` | `'form', 'id', 'className', ...` | - |
<Attributes.Title>useInput</Attributes.Title>
```ts
type useInput = (
initialValue: string,
) => {
type useInput = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>
@@ -144,6 +142,18 @@ type useInput = (
}
```
<Attributes.Title>TextareaTypes</Attributes.Title>
```ts
type TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
<Attributes.Title>CSSResize</Attributes.Title>
```ts
type CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'
```
</Attributes>
export default ({ children }) => <Layout meta={meta}>{children}</Layout>

6
pages/zh-cn/components/toast.mdx
View File

@@ -109,7 +109,7 @@ const [toasts: Array<Toast>, setToast: (toast: Toast) => void] = useToasts()
```ts
interface Toast {
text?: string
type?: NormalTypes
type?: ToastTypes
delay?: number
actions?: Array<ToastAction>
}
@@ -125,10 +125,10 @@ interface ToastAction {
}
```
<Attributes.Title>NormalTypes</Attributes.Title>
<Attributes.Title>ToastTypes</Attributes.Title>
```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
type ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```
</Attributes>

2
pages/zh-cn/components/tooltip.mdx
View File

@@ -119,7 +119,7 @@ export const meta = {
scope={{ Tooltip, Spacer, Grid }}
code={`
() => {
const text = 'The Evil Rabbit Jumped over the Fence'
const text = 'HTTP is stateless, but not sessionless'
return (
<Grid.Container gap={1.5} justify="center" alignItems="center">
<Grid xs={8} justify="flex-end">

2
pages/zh-cn/components/user.mdx
View File

@@ -14,7 +14,7 @@ export const meta = {
desc="仅展示用户名。"
scope={{ User, Spacer }}
code={`
<User src="/images/avatar.png" name="Evil Rabbit" />
<User src="/images/avatar.png" name="Witt" />
`}
/>