feffery-antd-components

repository·main·Indexed 19 days ago

https://github.com/cnfeffery/feffery-antd-components

A third-party Plotly Dash component library based on Ant Design (Antd) that introduces rich, interactive web UI components into the Dash ecosystem. It includes components such as AntdAvatarGroup, AntdCheckableTag, AntdCountdown, AntdCountup, AntdEmpty, AntdRibbon, and AntdSpoiler. The library supports internationalization via the locale parameter and offers CDN acceleration for static assets.

Tokens
7.6K
Snippets
19
Records
29
Agent score
65%

What's inside feffery-antd-components

  1. Accelerate static assets using CDN

    main

    To avoid consuming server bandwidth and to accelerate access for small to medium-sized sites, you can force the browser to load dependencies from the unpkg CDN. This is achieved by setting serve_locally=False in the dash.Dash constructor.

    Note: This behavior applies when the application is not running in debug mode.

    # In non-debug mode, this forces dependencies to load from unpkg CDN
    app = dash.Dash(serve_locally=False)
  2. Use CDN for static assets

    main

    To avoid consuming server bandwidth and to accelerate access for small to medium-sized sites, you can force the browser to load dependencies from the unpkg CDN instead of serving them locally. This is achieved by setting serve_locally=False in the dash.Dash() constructor.

    # just set serve_locally=False in dash.Dash()
    app = dash.Dash(serve_locally=False)
  3. Install feffery-antd-components

    main

    You can install the latest stable version of feffery-antd-components using pip. To install the latest pre-release version, use the --pre flag.

    # Install latest stable version
    pip install feffery-antd-components -U
    
    # Install latest pre-release version
    pip install feffery-antd-components --pre -U
  4. Configure internationalization with the locale parameter

    main

    Many components in feffery-antd-components support internationalization via the locale parameter. The default language is 'zh-cn' (Simplified Chinese). You can switch to other supported languages by passing the corresponding locale string to the component.

    # Example: Setting the DatePicker to English
    fac.AntdDatePicker(locale='en-us')
    
    # Example: Setting the DatePicker to German
    fac.AntdDatePicker(locale='de-de')
  5. Configure internationalization (i18n) for components

    main

    Some components in feffery-antd-components support internationalization via the locale parameter. The default locale is 'zh-cn' (Simplified Chinese). You can set it to other supported values such as 'en-us', 'de-de', or 'ru-ru' to change the component's text content.

    # Example: Setting the DatePicker to English
    fac.AntdDatePicker(locale='en-us')
    
    # Example: Setting the DatePicker to German
    fac.AntdDatePicker(locale='de-de')
  6. AntdCountdown Props Reference

    main

    The following props are available for the AntdCountdown component:

    PropTypeDescription
    idstringUnique ID for the component.
    valuestringThe target deadline date/time string.
    valueFormatstringFormat used to parse the value string. Default: 'YYYY-MM-DD hh:mm:ss'.
    formatstringThe display format for the countdown (e.g., HH:mm:ss). Refer to day.js documentation.
    prefixnodeContent to display before the countdown numbers.
    suffixnodeContent to display after the countdown numbers.
    titlenodeThe title of the component.
    titleTooltipstringTooltip text shown when hovering over the title.
    valueStyleobjectCSS styles applied specifically to the countdown numbers.
    styleobjectCSS styles applied to the component container.
    classNamestring or objectCSS class name for the component.
    keystringUpdating this value forces a re-render of the component.
    setPropsfunctionDash-assigned callback to report property changes to Dash.
    finishEventobjectShape containing timestamp (number) to listen for the countdown end event.
    data-*stringWildcard for data attributes.
    aria-*stringWildcard for ARIA attributes.
  7. Configure AntdAvatarGroup size and responsive breakpoints

    main

    The size prop controls the dimensions of the avatars within the group. It accepts three types of values:

    1. Numeric: A single number representing the pixel size.
    2. Preset Strings: 'large', 'small', or 'default'.
    3. Responsive Object: An object defining pixel sizes for specific breakpoints (xs, sm, md, lg, xl, xxl).
    // Preset string
    size="small"
    
    // Numeric pixel value
    size={40}
    
    // Responsive breakpoints
    size={{
        xs: 32,
        sm: 38,
        md: 44,
        lg: 48
    }}
  8. Use the AntdRibbon component

    main

    The AntdRibbon component is used to display decorative ribbons on a target element. It wraps the target element (provided via children) and overlays a ribbon with specified text and color.

    Props

    PropTypeDescription
    idstringUnique ID for the component
    childrennodeThe target element to which the ribbon will be attached
    textnodeThe content/text to be displayed inside the ribbon
    colorstringThe color of the ribbon
    placement'start' or 'end'The position of the ribbon. Defaults to 'end'
    keystringUpdating this value forces a redraw of the component
    styleobjectCSS styles for the component
    classNamestring or objectCSS class names for the component
    setPropsfunctionDash-assigned callback to report property changes to Dash
    data-*stringSupport for data-* attributes
    aria-*stringSupport for aria-* attributes
    import AntdRibbon from 'feffery-antd-components';
    
    // Example usage
    <AntdRibbon text="New" color="red" placement="start">
        <div style={{ width: 100, height: 100, border: '1px solid black' }}>
            Target Element
        </div>
    </AntdRibbon>
  9. Configure AntdDescriptionItem props

    main

    The AntdDescriptionItem component accepts the following props for customization:

    PropTypeDescription
    idstringUnique ID for the component.
    labelnodeThe title/label content for the item.
    childrennodeThe content/value of the item.
    spannumberThe width span of the item (defaults to 1).
    keystringUpdating this value forces a re-render of the component.
    classNamestring or objectCSS class name for the component (supports dynamic class names).
    styleobjectInline CSS styles for the component.
    stylesobjectGranular control for sub-elements: { label: object, content: object }.
    classNamesobjectGranular control for sub-element classes: { label: string, content: string }.
    setPropsfunctionDash-assigned callback to report property changes to Dash.
    data-*stringWildcard for data-* attributes.
    aria-*stringWildcard for aria-* attributes.