docs: add demos for back-top, carousel, collapse, list, select, tabs, transfer

Add missing prop demos: custom BackTop trigger, carousel ref methods,
collapse panel extra, list pagination, select custom rendering,
tabs extra content with icons, and transfer custom renderItem.

Author: wangdicoder

components/back-top/demo/custom.md

@@ -0,0 +1,28 @@
+<demo>
+
+### Custom Trigger
+
+Use custom children to replace the default button.
+
+```jsx live
+() => {
+  return (
+    <BackTop visibilityHeight={100}>
+      <div style={{
+        width: 40,
+        height: 40,
+        borderRadius: 4,
+        backgroundColor: '#6e41bf',
+        color: '#fff',
+        textAlign: 'center',
+        lineHeight: '40px',
+        fontSize: 14,
+      }}>
+        UP
+      </div>
+    </BackTop>
+  );
+}
+```
+
+</demo>

components/back-top/index.md

@@ -1,4 +1,5 @@
 import Basic from './demo/basic.md'
+import Custom from './demo/custom.md'
 
 # BackTop
 
@@ -22,6 +23,7 @@ import { BackTop } from 'tiny-ui';
     <Basic/>
   </column>
   <column>
+    <Custom/>
   </column>
 </layout>
 

components/carousel/demo/methods.md

@@ -0,0 +1,37 @@
+<demo>
+
+### Ref Methods
+
+Use `ref` to access `goTo`, `next`, and `prev` methods for programmatic control.
+
+```jsx live
+() => {
+  const ref = React.useRef();
+  const style = {
+    height: 160,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    fontSize: 24,
+  };
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button onClick={() => ref.current.prev()}>Prev</Button>
+        <Button onClick={() => ref.current.next()}>Next</Button>
+        <Button onClick={() => ref.current.goTo(2)}>Go to Slide 3</Button>
+      </Space>
+      <Carousel ref={ref} dots>
+        <div style={{ ...style, background: '#364d79' }}>Slide 1</div>
+        <div style={{ ...style, background: '#6b8e23' }}>Slide 2</div>
+        <div style={{ ...style, background: '#8b4513' }}>Slide 3</div>
+        <div style={{ ...style, background: '#483d8b' }}>Slide 4</div>
+      </Carousel>
+    </div>
+  );
+}
+```
+
+</demo>

components/carousel/index.md

@@ -1,6 +1,7 @@
 import Basic from './demo/basic.md'
 import Arrows from './demo/arrows.md'
 import Fade from './demo/fade.md'
+import Methods from './demo/methods.md'
 
 # Carousel
 
@@ -21,6 +22,7 @@ import { Carousel } from 'tiny-ui';
   </column>
   <column>
     <Arrows/>
+    <Methods/>
   </column>
 </layout>
 

components/collapse/demo/extra.md

@@ -0,0 +1,49 @@
+<demo>
+
+### Extra Content
+
+Add extra elements in the panel header corner with the `extra` prop.
+
+```jsx live
+() => {
+  const { Panel } = Collapse;
+
+  return (
+    <Collapse defaultActiveKey={['1']}>
+      <Panel
+        itemKey="1"
+        header="Panel with action"
+        extra={
+          <Button
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              alert('Settings clicked');
+            }}
+          >
+            Settings
+          </Button>
+        }
+      >
+        Panel content with an extra action button.
+      </Panel>
+      <Panel
+        itemKey="2"
+        header="Panel with badge"
+        extra={<Badge count={5} />}
+      >
+        Panel content with a badge indicator.
+      </Panel>
+      <Panel
+        itemKey="3"
+        header="Panel with tag"
+        extra={<Tag color="#6e41bf">New</Tag>}
+      >
+        Panel content with a tag.
+      </Panel>
+    </Collapse>
+  );
+}
+```
+
+</demo>

components/collapse/index.md

@@ -2,6 +2,7 @@ import Accordion from './demo/accordion.md'
 import Basic from './demo/basic.md'
 import Borderless from './demo/borderless.md'
 import Deletable from './demo/deletable.md'
+import Extra from './demo/extra.md'
 import Nested from './demo/nested.md'
 
 # Collapse
@@ -33,6 +34,7 @@ const { Panel } = Collapse;
   <column>
     <Borderless/>
     <Deletable/>
+    <Extra/>
   </column>
 </layout>
 

components/list/demo/pagination.md

@@ -0,0 +1,23 @@
+<demo>
+
+### Pagination
+
+Use `pagination` to add a pager to the list.
+
+```jsx live
+() => {
+  const data = Array.from({ length: 25 }, (_, i) => `Item ${i + 1}`);
+
+  return (
+    <List
+      bordered
+      header="Paginated List"
+      dataSource={data}
+      pagination={{ pageSize: 5 }}
+      renderItem={(item) => <List.Item>{item}</List.Item>}
+    />
+  );
+}
+```
+
+</demo>

components/list/index.md

@@ -3,6 +3,7 @@ import Sizes from './demo/sizes.md'
 import Actions from './demo/actions.md'
 import Grid from './demo/grid.md'
 import Loading from './demo/loading.md'
+import Pagination from './demo/pagination.md'
 import Virtual from './demo/virtual.md'
 
 # List
@@ -31,6 +32,7 @@ import { List } from 'tiny-ui';
     <Sizes/>
     <Loading/>
     <Virtual/>
+    <Pagination/>
   </column>
 </layout>
 

components/select/demo/render.md

@@ -0,0 +1,43 @@
+<demo>
+
+### Custom Rendering
+
+Use `optionRender` to customize dropdown items and `labelRender` to customize the selected label.
+
+```jsx live
+() => {
+  const options = [
+    { value: 'red', label: 'Red' },
+    { value: 'green', label: 'Green' },
+    { value: 'blue', label: 'Blue' },
+    { value: 'purple', label: 'Purple' },
+  ];
+
+  const colors = { red: '#f5222d', green: '#52c41a', blue: '#1890ff', purple: '#722ed1' };
+
+  return (
+    <Select
+      defaultValue="blue"
+      style={{ width: 200 }}
+      options={options}
+      optionRender={(option) => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            backgroundColor: colors[option.value],
+            display: 'inline-block',
+          }} />
+          {option.label}
+        </div>
+      )}
+      labelRender={({ label, value }) => (
+        <span style={{ color: colors[value] }}>{label}</span>
+      )}
+    />
+  );
+}
+```
+
+</demo>

components/select/index.md

@@ -1,6 +1,7 @@
 import Basic from './demo/basic.md'
 import Search from './demo/search.md'
 import Multiple from './demo/multiple.md'
+import Render from './demo/render.md'
 import Sizes from './demo/sizes.md'
 import Groups from './demo/groups.md'
 import Custom from './demo/custom.md'
@@ -35,6 +36,7 @@ const { Option, OptGroup } = Select;
     <Sizes/>
     <Groups/>
     <Custom/>
+    <Render/>
   </column>
 </layout>