Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/mini-demo/src/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default defineAppConfig({
'pages/popup/index',
'pages/list/index',
'pages/collapse/index',
'pages/radio/index',
],
window: {
backgroundTextStyle: 'light',
Expand Down
27 changes: 27 additions & 0 deletions packages/mini-demo/src/pages/radio/component/basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
return (
<Panel title="基本用法">
<List>
<List.Item>
<Radio>普通</Radio>
</List.Item>
<List.Item>
<Radio defaultChecked>默认选中</Radio>
</List.Item>
<List.Item>
<Radio disabled>禁用</Radio>
</List.Item>
<List.Item>
<Radio defaultChecked disabled>
选中且禁用
</Radio>
</List.Item>
</List>
</Panel>
);
};

export default Demo;
39 changes: 39 additions & 0 deletions packages/mini-demo/src/pages/radio/component/button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import * as React from 'react';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
return (
<Panel title="按钮样式">
<List.Item title="普通">
<Radio.Group type="button">
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
<List.Item title="禁用">
<Radio.Group type="button" disabled>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
<List.Item title="通栏">
<Radio.Group type="button" block>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
<List.Item title="紧凑">
<Radio.Group type="button" compact>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
</Panel>
);
};

export default Demo;
27 changes: 27 additions & 0 deletions packages/mini-demo/src/pages/radio/component/group.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
const [value, setValue] = React.useState([]);

const onChange = (val) => {
console.log('onChange', val);
setValue(val);
};

return (
<Panel title="组合使用">
<List>
<List.Item>
<Radio.Group value={value} onChange={onChange}>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
</List>
</Panel>
);
};

export default Demo;
28 changes: 28 additions & 0 deletions packages/mini-demo/src/pages/radio/component/list.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
return (
<>
<Panel title="列表样式">
<Radio.Group type="list">
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2" disabled>
选项三(禁止选择)
</Radio>
</Radio.Group>
</Panel>
<Panel title="通栏样式">
<List.Item>
<Radio.Group block>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
</Radio.Group>
</List.Item>
</Panel>
</>
);
};

export default Demo;
3 changes: 3 additions & 0 deletions packages/mini-demo/src/pages/radio/index.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: 'Radio',
});
22 changes: 22 additions & 0 deletions packages/mini-demo/src/pages/radio/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// .popup-box {
// width: 100%;
// height: 200px;
// background-color: #fff;
// padding: 20px;
// }

// .popup-box-top {
// width: 100%;
// background-color: rgba(0, 0, 0, 0.5);
// color: #fff;
// text-align: center;
// padding: 10px;
// }

// .popup-box-left,
// .popup-box-right {
// width: 200px;
// height: 100%;
// background: #fff;
// padding: 20px;
// }
17 changes: 17 additions & 0 deletions packages/mini-demo/src/pages/radio/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as React from 'react';
import Basic from './component/basic';
import Button from './component/button';
import Group from './component/group';
import List from './component/list';
import './index.scss';

export default () => {
return (
<>
<Basic />
<Group />
<List />
<Button />
</>
);
};
70 changes: 35 additions & 35 deletions packages/mini-demo/src/site.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,41 @@ const siteMap = {
// }
],
},
// input: {
// title: '数据录入',
// components: [
// {
// key: 'Checkbox',
// name: '复选框',
// page: '/pages/checkbox/index',
// },
// {
// key: 'Input',
// name: '输入框',
// page: '/pages/input/index',
// },
// {
// key: 'Keyboard',
// name: '键盘',
// page: '/pages/keyboard/index',
// },
// {
// key: 'Radio',
// name: '复选框',
// page: '/pages/radio/index',
// },
// {
// key: 'Stepper',
// name: '步进器',
// page: '/pages/stepper/index',
// },
// {
// key: 'Collapse',
// name: '折叠面板',
// page: '/pages/collapse/index',
// },
// ]
// },
input: {
title: '数据录入',
components: [
// {
// key: 'Checkbox',
// name: '复选框',
// page: '/pages/checkbox/index',
// },
// {
// key: 'Input',
// name: '输入框',
// page: '/pages/input/index',
// },
// {
// key: 'Keyboard',
// name: '键盘',
// page: '/pages/keyboard/index',
// },
{
key: 'Radio',
name: '复选框',
page: '/pages/radio/index',
},
// {
// key: 'Stepper',
// name: '步进器',
// page: '/pages/stepper/index',
// },
// {
// key: 'Collapse',
// name: '折叠面板',
// page: '/pages/collapse/index',
// },
],
},
view: {
title: '数据展示',
components: [
Expand Down
2 changes: 2 additions & 0 deletions packages/zarm/src/index.mini.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@ export { default as Panel } from './panel/index.mini';
export type { PanelProps } from './panel/index.mini';
export { default as Popup } from './popup/index.mini';
export type { PopupProps } from './popup/index.mini';
export { default as Radio } from './radio/index.mini';
export type { RadioGroupProps, RadioProps } from './radio/index.mini';
export { default as Select } from './select';
Loading