Skip to content

Commit

Permalink
chore: radio mini demo
Browse files Browse the repository at this point in the history
  • Loading branch information
王梦良 authored and 王梦良 committed Aug 29, 2023
1 parent 92958c0 commit d181aa6
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 117 deletions.
27 changes: 27 additions & 0 deletions packages/mini-demo/src/pages/radio/component/basic.tsx
View file
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
View file
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
View file
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
View file
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;
96 changes: 11 additions & 85 deletions packages/mini-demo/src/pages/radio/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,17 @@
import { View } from '@tarojs/components';
import * as React from 'react';
import { List, Radio } from 'zarm/mini';
import Basic from './component/basic';
import Button from './component/button';
import Group from './component/group';
import List from './component/list';
import './index.scss';

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

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

export default () => {
return (
<View style={{ padding: 20 }}>
<View>基本用法</View>
<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>
<View>组合使用</View>
<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>
<View>列表样式</View>
<Radio.Group type="list">
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
<Radio value="2" disabled>
选项三（禁止选择）
</Radio>
</Radio.Group>
<View>通栏样式</View>
<List.Item>
<Radio.Group block>
<Radio value="0">选项一</Radio>
<Radio value="1">选项二</Radio>
</Radio.Group>
</List.Item>
<View>按钮样式</View>
<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>
</View>
<>
<Basic />
<Group />
<List />
<Button />
</>
);
};

export default Demo;
8 changes: 3 additions & 5 deletions packages/zarm/src/radio/demo/basic.mini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { View } from '@tarojs/components';
import * as React from 'react';
import { List, Radio } from 'zarm/mini';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
return (
<View style={{ padding: 20 }}>
<View>基本用法</View>
<Panel title="基本用法">
<List>
<List.Item>
<Radio>普通</Radio>
Expand All @@ -22,7 +20,7 @@ const Demo = () => {
</Radio>
</List.Item>
</List>
</View>
</Panel>
);
};

Expand Down
8 changes: 3 additions & 5 deletions packages/zarm/src/radio/demo/button.mini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { View } from '@tarojs/components';
import * as React from 'react';
import { List, Radio } from 'zarm/mini';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
return (
<View style={{ padding: 20 }}>
<View>按钮样式</View>
<Panel title="按钮样式">
<List.Item title="普通">
<Radio.Group type="button">
<Radio value="0">选项一</Radio>
Expand Down Expand Up @@ -34,7 +32,7 @@ const Demo = () => {
<Radio value="2">选项三</Radio>
</Radio.Group>
</List.Item>
</View>
</Panel>
);
};

Expand Down
8 changes: 3 additions & 5 deletions packages/zarm/src/radio/demo/group.mini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { View } from '@tarojs/components';
import * as React from 'react';
import { List, Radio } from 'zarm/mini';
import { List, Panel, Radio } from 'zarm/mini';

const Demo = () => {
const [value, setValue] = React.useState([]);
Expand All @@ -11,8 +10,7 @@ const Demo = () => {
};

return (
<View style={{ padding: 20 }}>
<View>组合使用</View>
<Panel title="组合使用">
<List>
<List.Item>
<Radio.Group value={value} onChange={onChange}>
Expand All @@ -22,7 +20,7 @@ const Demo = () => {
</Radio.Group>
</List.Item>
</List>
</View>
</Panel>
);
};

Expand Down
33 changes: 17 additions & 16 deletions packages/zarm/src/radio/demo/list.mini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import { View } from '@tarojs/components';
import * as React from 'react';
import { List, Radio } from 'zarm/mini';
import { List, Panel, Radio } from 'zarm/mini';

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

Expand Down
3 changes: 2 additions & 1 deletion packages/zarm/src/radio/style/index.mini.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import '../../button/style/index.mini';
import '../../icon/style';
import '../../list/style';
import '../../list/style/index.mini';
import '../../style';
import './index.scss';

0 comments on commit d181aa6

Please sign in to comment.