69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
||
import NtrpRange from './index';
|
||
|
||
const StyleTest: React.FC = () => {
|
||
const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
|
||
|
||
return (
|
||
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
||
<h1>NtrpRange 样式测试</h1>
|
||
|
||
<div style={{ marginBottom: '30px' }}>
|
||
<h2>NTRP 水平区间选择器</h2>
|
||
<NtrpRange
|
||
min={2.0}
|
||
max={4.0}
|
||
step={0.5}
|
||
value={value}
|
||
onChange={setValue}
|
||
/>
|
||
<div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
|
||
当前选择范围: {value[0]} - {value[1]}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '30px' }}>
|
||
<h2>自定义范围选择器</h2>
|
||
<NtrpRange
|
||
min={0}
|
||
max={100}
|
||
step={1}
|
||
value={[20, 80]}
|
||
onChange={(val) => console.log('Custom range:', val)}
|
||
/>
|
||
<div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
|
||
固定范围: 20 - 80
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '30px' }}>
|
||
<h2>禁用状态</h2>
|
||
<NtrpRange
|
||
min={1}
|
||
max={10}
|
||
step={1}
|
||
value={[3, 7]}
|
||
disabled={true}
|
||
/>
|
||
<div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
|
||
此选择器已被禁用
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '30px' }}>
|
||
<h2>样式说明</h2>
|
||
<div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
|
||
<p>✅ 网球图标 + "NTRP水平区间"标题</p>
|
||
<p>✅ 左右范围标签（"2.0及以下"、"4.0及以上"）</p>
|
||
<p>✅ 圆角矩形轨道容器，带有边框和阴影</p>
|
||
<p>✅ 白色圆形滑块手柄，黑色边框和阴影</p>
|
||
<p>✅ 黑色轨道填充条</p>
|
||
<p>✅ 五个浅灰色标记点</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default StyleTest;
|