Taroify Documentation

The Form component is used for data entry and validation. It supports various input types including text inputs, radio buttons, checkboxes, and file uploads.

import { Form } from "@taroify/core"

The areaList prop must be an object containing three keys: province_list, city_list, and county_list.

Each list is an object where the key is a 6-digit region code (representing province, city, and county respectively, padded with zeros) and the value is the name of the region. For example, Beijing's code is 110000.

const areaList = {
  province_list: {
    110000: "北京市",
    120000: "天津市",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
  },
}

Setting the disabled prop on a Form component will automatically propagate the disabled state to its child components, including Input, Textarea, Checkbox, Switch, Checkbox.Group, Radio.Group, Rate, Slider, Stepper, and Uploader.

There is a priority hierarchy for the disabled state:

1. Form (Highest priority)
2. Form Item / Field
3. Individual Component (Lowest priority)

This means if a Form is disabled, you cannot re-enable a specific Field or Component within it. However, if the Form is enabled, you can still disable specific items or components.

The repository is organized into several key directories:

• packages/core: Contains the source code for individual components. Each component resides in its own folder.
• packages/: Contains various sub-packages.
• site/: Contains the source code for the documentation website. You can run the documentation site locally using pnpm --dir site run site:develop.
• bundles/: Contains build artifacts.
• scripts/: Contains utility scripts.

taroify
├─ bundles         # 构建
├─ packages/core   # 组件
├─ packages        # 子包
├─ site            # 文档
└─ scripts         # 脚本

You can control how the notification text is displayed using the following properties:

• scrollable: Controls whether the content scrolls when it overflows. It defaults to false. Set to true to enable automatic scrolling.
• wordwrap: Enables text wrapping for multiple lines. This property only takes effect when scrollable is set to false.
• delay: The animation delay time in milliseconds (default: 1000).
• speed: The scrolling speed in px/s (default: 60).

// Enable scrolling for short text
<NoticeBar scrollable>技术是开发它的人的共同灵魂。</NoticeBar>

// Disable scrolling for long text
<NoticeBar scrollable={false}>
  在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</NoticeBar>

// Enable multi-line wrapping (requires scrollable={false})
<NoticeBar wordwrap scrollable={false}>
  在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</NoticeBar>

By default, the calendar tiles all months within the specified range. For large date ranges, use switchMode="year-month" to render only the current month and provide buttons to switch between months or years. This is more efficient for large spans.

<Calendar
  min={new Date(2020, 0, 1)}
  max={new Date(2030, 11, 31)}
  switchMode="year-month"
/>

TreeSelect supports both single and multiple selection modes based on the type of the value prop provided:

• Single Selection: Pass a single number or string to the value prop.
• Multi-selection: Pass an array of number or string to the value prop. The max prop can be used to limit the number of items that can be selected.

tabValue controls the currently active index in the left-side navigation, while value controls the selected item(s) in the right-side content area.

// Multi-select example
const [value, setValue] = useState([0, 1])

<TreeSelect value={value} onChange={setValue}>
  <TreeSelect.Tab title="Group">
    <TreeSelect.Option value={0}>Option 0</TreeSelect.Option>
    <TreeSelect.Option value={1}>Option 1</TreeSelect.Option>
  </TreeSelect.Tab>
</TreeSelect>

By default, Tabs uses the index of the panel. If you provide a value prop to Tabs.TabPanel, you can use Tabs.defaultValue to set the initial active tab based on that specific identifier (string or number) instead of an index.

<Tabs defaultValue="a">
  <Tabs.TabPanel value="a" title="标签 1">
    内容 1
  </Tabs.TabPanel>
  <Tabs.TabPanel value="b" title="标签 2">
    内容 2
  </Tabs.TabPanel>
</Tabs>