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; flex-direction: row;
align-items: stretch; align-items: stretch;
gap: var(--spacing-m); gap: var(--spacing-m);
overflow-y: auto;
} }
.function_side { .function_side {
display: flex; display: flex;

103
src/pages/Wheels.tsx
View File

@ -3,6 +3,7 @@ import { useAtom } from 'jotai';
import { useState } from 'react'; import { useState } from 'react';
import { ColorPicker } from '../components/ColorPicker'; import { ColorPicker } from '../components/ColorPicker';
import { LabeledPicker } from '../components/LabeledPicker'; import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import { VSegmentedControl } from '../components/VSegmentedControl'; import { VSegmentedControl } from '../components/VSegmentedControl';
import { ColorWheel } from '../page-components/wheels/ColorWheel'; import { ColorWheel } from '../page-components/wheels/ColorWheel';
import { currentPickedColor } from '../stores/colors'; import { currentPickedColor } from '../stores/colors';
@ -20,58 +21,60 @@ export function Wheels() {
<h3>Color Wheels</h3> <h3>Color Wheels</h3>
<p>Choose the required color on the color wheel according to color theory.</p> <p>Choose the required color on the color wheel according to color theory.</p>
</header> </header>
<section className={styles.explore_section}> <ScrollArea enableY>
<aside className={styles.function_side}> <section className={styles.explore_section}>
<div> <aside className={styles.function_side}>
<h5>Basic color</h5> <div>
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} /> <h5>Basic color</h5>
</div> <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
<div> </div>
<h5>Series Setting</h5> <div>
<LabeledPicker <h5>Series Setting</h5>
title="Expand Tones" <LabeledPicker
min={1} title="Expand Tones"
max={5} min={1}
step={1} max={5}
value={tones} step={1}
onChange={setTones} value={tones}
/> onChange={setTones}
<LabeledPicker />
title="Tone Step" <LabeledPicker
min={5} title="Tone Step"
max={50} min={5}
step={1} max={50}
unit="%" step={1}
value={steps} unit="%"
onChange={setSteps} 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>
<div className={styles.mode_navigation}> </section>
<h5>Color selection method</h5> </ScrollArea>
<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>
</div> </div>
); );
} }