Browse Source
docs: add debug demo for segmented (#35176)
* docs: add debug demo for segmented
* chore: update
* chore: update
pull/35190/head
vagusX
3 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
241 additions and
0 deletions
-
components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
-
components/segmented/__tests__/__snapshots__/demo.test.js.snap
-
components/segmented/demo/controlled-two.md
|
|
|
@ -178,6 +178,106 @@ exports[`renders ./components/segmented/demo/controlled.md extend context correc |
|
|
|
</div> |
|
|
|
`; |
|
|
|
|
|
|
|
exports[`renders ./components/segmented/demo/controlled-two.md extend context correctly 1`] = ` |
|
|
|
Array [ |
|
|
|
<div |
|
|
|
class="ant-segmented" |
|
|
|
> |
|
|
|
<label |
|
|
|
class="ant-segmented-item ant-segmented-item-selected" |
|
|
|
> |
|
|
|
<input |
|
|
|
checked="" |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="AND" |
|
|
|
> |
|
|
|
AND |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="OR" |
|
|
|
> |
|
|
|
OR |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="NOT" |
|
|
|
> |
|
|
|
NOT |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
</div>, |
|
|
|
" ", |
|
|
|
<div |
|
|
|
class="ant-segmented" |
|
|
|
> |
|
|
|
<label |
|
|
|
class="ant-segmented-item ant-segmented-item-selected" |
|
|
|
> |
|
|
|
<input |
|
|
|
checked="" |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="AND" |
|
|
|
> |
|
|
|
AND |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="OR" |
|
|
|
> |
|
|
|
OR |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="NOT" |
|
|
|
> |
|
|
|
NOT |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
</div>, |
|
|
|
] |
|
|
|
`; |
|
|
|
|
|
|
|
exports[`renders ./components/segmented/demo/custom.md extend context correctly 1`] = ` |
|
|
|
Array [ |
|
|
|
<div |
|
|
|
|
|
|
|
@ -178,6 +178,106 @@ exports[`renders ./components/segmented/demo/controlled.md correctly 1`] = ` |
|
|
|
</div> |
|
|
|
`; |
|
|
|
|
|
|
|
exports[`renders ./components/segmented/demo/controlled-two.md correctly 1`] = ` |
|
|
|
Array [ |
|
|
|
<div |
|
|
|
class="ant-segmented" |
|
|
|
> |
|
|
|
<label |
|
|
|
class="ant-segmented-item ant-segmented-item-selected" |
|
|
|
> |
|
|
|
<input |
|
|
|
checked="" |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="AND" |
|
|
|
> |
|
|
|
AND |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="OR" |
|
|
|
> |
|
|
|
OR |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="NOT" |
|
|
|
> |
|
|
|
NOT |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
</div>, |
|
|
|
" ", |
|
|
|
<div |
|
|
|
class="ant-segmented" |
|
|
|
> |
|
|
|
<label |
|
|
|
class="ant-segmented-item ant-segmented-item-selected" |
|
|
|
> |
|
|
|
<input |
|
|
|
checked="" |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="AND" |
|
|
|
> |
|
|
|
AND |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="OR" |
|
|
|
> |
|
|
|
OR |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<label |
|
|
|
class="ant-segmented-item" |
|
|
|
> |
|
|
|
<input |
|
|
|
class="ant-segmented-item-input" |
|
|
|
type="radio" |
|
|
|
/> |
|
|
|
<div |
|
|
|
class="ant-segmented-item-label" |
|
|
|
title="NOT" |
|
|
|
> |
|
|
|
NOT |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
</div>, |
|
|
|
] |
|
|
|
`; |
|
|
|
|
|
|
|
exports[`renders ./components/segmented/demo/custom.md correctly 1`] = ` |
|
|
|
Array [ |
|
|
|
<div |
|
|
|
|
|
|
|
@ -0,0 +1,41 @@ |
|
|
|
--- |
|
|
|
order: 99 |
|
|
|
title: |
|
|
|
zh-CN: 受控同步模式 |
|
|
|
en-US: Controlled Synced mode |
|
|
|
debug: true |
|
|
|
--- |
|
|
|
|
|
|
|
## zh-CN |
|
|
|
|
|
|
|
测试受控模式下两个 Segmented 同步 state。 |
|
|
|
|
|
|
|
## en-US |
|
|
|
|
|
|
|
Tests two Segmented synchronized states in controlled mode. |
|
|
|
|
|
|
|
```jsx |
|
|
|
import { useState } from 'react'; |
|
|
|
import { Segmented } from 'antd'; |
|
|
|
|
|
|
|
const Demo = () => { |
|
|
|
const [foo, setFoo] = useState('AND'); |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Segmented |
|
|
|
value={foo} |
|
|
|
options={['AND', 'OR', 'NOT']} |
|
|
|
onChange={e => setFoo(e.target.value)} |
|
|
|
/> |
|
|
|
|
|
|
|
<Segmented |
|
|
|
value={foo} |
|
|
|
options={['AND', 'OR', 'NOT']} |
|
|
|
onChange={e => setFoo(e.target.value)} |
|
|
|
/> |
|
|
|
</> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default Demo; |
|
|
|
``` |
