xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用自定义Scroll布局组件替代浏览器默认滚动条。

Browse Source
This commit is contained in:
徐涛 2025-01-06 13:34:04 +08:00
parent 322779effc
commit 3c8cf08c5d
2 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Wheels.module.css
View File

@ -9,7 +9,6 @@
flex-direction: row;
align-items: stretch;
gap: var(--spacing-m);
overflow-y: auto;
}
.function_side {
display: flex;

103
src/pages/Wheels.tsx
View File

@ -3,6 +3,7 @@ import { useAtom } from 'jotai';
import { useState } from 'react';
import { ColorPicker } from '../components/ColorPicker';
import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import { VSegmentedControl } from '../components/VSegmentedControl';
import { ColorWheel } from '../page-components/wheels/ColorWheel';
import { currentPickedColor } from '../stores/colors';
@ -20,58 +21,60 @@ export function Wheels() {
<h3>Color Wheels</h3>
<p>Choose the required color on the color wheel according to color theory.</p>
</header>
<section className={styles.explore_section}>
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div>
<div>
<h5>Series Setting</h5>
<LabeledPicker
title="Expand Tones"
min={1}
max={5}
step={1}
value={tones}
onChange={setTones}
/>
<LabeledPicker
title="Tone Step"
min={5}
max={50}
step={1}
unit="%"
value={steps}
onChange={setSteps}
<ScrollArea enableY>
<section className={styles.explore_section}>
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div>
<div>
<h5>Series Setting</h5>
<LabeledPicker
title="Expand Tones"
min={1}
max={5}
step={1}
value={tones}
onChange={setTones}
/>
<LabeledPicker
title="Tone Step"
min={5}
max={50}
step={1}
unit="%"
value={steps}
onChange={setSteps}
/>
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },
{ label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
{ label: 'Triadic', value: 'triadic' },
{ label: 'Split Complementary', value: 'split_complementary' },
{ label: 'Tetradic', value: 'tetradic' },
{ label: 'Flip Tetradic', value: 'flip_tetradic' },
{ label: 'Square', value: 'square' },
]}
/>
</div>
</aside>
<div className={styles.wheel_side}>
<ColorWheel
originColor={selectedColor}
highlightMode={selectedMode}
tones={tones}
step={steps}
/>
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },
{ label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
{ label: 'Triadic', value: 'triadic' },
{ label: 'Split Complementary', value: 'split_complementary' },
{ label: 'Tetradic', value: 'tetradic' },
{ label: 'Flip Tetradic', value: 'flip_tetradic' },
{ label: 'Square', value: 'square' },
]}
/>
</div>
</aside>
<div className={styles.wheel_side}>
<ColorWheel
originColor={selectedColor}
highlightMode={selectedMode}
tones={tones}
step={steps}
/>
</div>
</section>
</section>
</ScrollArea>
</div>
);
}