DOCSEARCHbyAlgolia
Submit Docs

ykui Component Library

website·Indexed 30 days ago

https://dorki-search.vercel.app/

A React component library featuring a comprehensive set of UI elements including form inputs (Input, Select, DatePicker, TimePicker, Checkbox, Radio, Switch), data display (Table, Avatar, Image, Loading), layout tools (Flex, Layout, Divider), and feedback components (Message, Modal, Popover, Drawer, Alert). It includes a built-in icon set and a rich text editor based on draft-js and draft-convert.

Tokens
21.4K
Snippets
147
Records
148
Agent score
75%

What's inside ykui

  1. Use the Message component for feedback notifications

    The Message component is used to provide feedback after an active user operation. It differs from Notification, which is intended for passive system-level alerts. It supports four types: success, error, info, and warn.
    function App() {
  return (
    <div className="ykui-demo-row">
      <Message type="success" message="成功提示的文案" />
      <Message type="error" message="错误提示的文案" />
      <Message type="info" message="消息提示的文案" />
      <Message type="warn" message="警告提示的文案" />
    </div>
  );
}

  3. Implement lazy loading for Cascader data

    To load hierarchical data on demand, set lazy={true} and provide a lazyLoad function. The lazyLoad function receives the current node and a resolve callback to return the children for that node.
    const args = {
  data: data,
  lazy: true,
  lazyLoad: (node, resolve) => {
    setTimeout(() => {
      resolve([{ label: 'Dynamic Child', value: 1, lazy: true }]);
    }, 500);
  },
  defaultLabel() {
    return 'Loading...';
  },
  onChange: (value) => console.log(value)
};

<Cascader {...args} />

  4. Install @tencent/ykui using npm or yarn

    Install the @tencent/ykui package into your project using either the npm or yarn package manager.
    # Using npm
npm install @tencent/ykui --save

# Using yarn
yarn add @tencent/ykui

  5. Provide a global mount point using PortalProvider

    The PortalProvider component allows you to define a shared mount point for all child Portal components. If a Portal is used without a container prop, it will automatically use the container provided by the PortalProvider context.
    import React from 'react';
import { Portal, PortalProvider } from '@tencent/ykui';

function PortalContextDemo(props) {
  return (
    <PortalProvider>
      {(ref) => (
        <>
          <Portal>
            <p>portal1 renders in global-container</p>
          </Portal>
          <Portal>
            <p>portal2 renders in global-container</p>
          </Portal>
          <div className="global-container" ref={ref}/>
        </>
      )}
    </PortalProvider>
  );
}

  6. Implement a grid layout using Flex and Flex.Item

    The Flex grid system uses a regular grid array to standardize module layout and information distribution. To create a grid, wrap each grid item (Flex.Item) inside a Flex container. You can control the width of the container and the proportional span of each item (ranging from 1 to 24).
    function App() {
  return (
    <div className="ykui-demo-column">
      {/* Example 1: Basic layout with fixed width */}
      <Flex width='360px'>
        <Flex.Item span={6}>
          <Select />
        </Flex.Item>
        <Flex.Item >
          <Input />
        </Flex.Item>
      </Flex>

      {/* Example 2: Layout with specific spans */}
      <Flex width='360px'>
        <Flex.Item span={6}>
          <Select />
        </Flex.Item>
        <Flex.Item span={8}>
          <Input />
        </Flex.Item>
        <Flex.Item span={10}>
          <Select />
        </Flex.Item>
      </Flex>

      {/* Example 3: Layout with gutter and offset */}
      <Flex width={240} gutter={8} style={{ background: "#EBEDF0" }}>
        <Flex.Item span={6} style={{ background: "#CDDBF9" }}>1</Flex.Item>
        <Flex.Item span={10} offset={2} style={{ background: "#CDDBF9" }}>2</Flex.Item>
      </Flex>
    </div>
  );
}

  7. Display a user avatar with the Avatar component

    The Avatar component is used to display user profile images or fallback content. You can provide an image URL via the image prop. If the link is invalid or missing, the component displays a default user icon.
    function App() {
  return (
    <div className="ykui-demo-row">
      <Avatar image="https://picsum.photos/180/120" />
      <Avatar image="https://picsum123.photos/180/120" />
      <Avatar />
    </div>
  )
}

  9. Implement basic pagination

    Use the Pagination component to split large datasets into pages. Key properties include current for the active page (starting from 1), pageSize for items per page, and total for the total number of items.
    function App() {
  const args = {
    total: 120,
    current: 7,
    pageSize: 20,
    onChange: (page) => {
      console.log('page', page)
    },
    onShowSizeChange: (pageSize) => {
      console.log('pageSize:', pageSize)
    },
  }
  return (
    <Pagination {...args} />
  )
}

  11. Implement basic file uploading with UploadList

    The UploadList component allows users to upload files via clicking or dragging and dropping. You can control the component's width using the width property.
    function App() {
  return (
    <div className="ykui-demo-column">
      <UploadList uploading={true} width={98} />
      <UploadList uploading={true} width={152} />
    </div>
  );
}

  12. Create a group of avatars using Avatar.Group

    Use Avatar.Group to wrap multiple Avatar components. This creates a stacked avatar effect.

    Key configuration options for Avatar.Group:

    • cascading: Controls the folding/stacking direction. Options are right (default) or left.
    • gap: A number to set the spacing between avatars in the group (default: 0).
    • Prop Passthrough: Avatar.Group can pass size, shape, and color props to all child Avatar components. However, props defined directly on an individual Avatar will override the group's settings.
    function App() {
  return (
    <div className="ykui-demo-column">
      {/* Group with right-cascading and shared styles */}
      <Avatar.Group cascading="right" size={40} shape="round" color="#5698F6">
        <Avatar>L</Avatar>
        <Avatar>P</Avatar>
        <Avatar>L</Avatar>
      </Avatar.Group>

      {/* Group where individual Avatars override group styles */}
      <Avatar.Group size={40} shape="round" color="#5598F6">
        <Avatar size={32}>L</Avatar>
        <Avatar shape="circle">C</Avatar>
        <Avatar color="#F5B9B6">K</Avatar>
      </Avatar.Group>
    </div>
  )
}