Get started with alifd__next CDN

MIT licensed

Alifd\_next: Alibabas lightweight JS UI library for interactive Flutter interfaces.

Tags:

fusion
fusion design
next
component
ui tookit
react
react-components
components
design
frontend

Stable version

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min.js Copied!

How to start using alifd__next CDN


// Include the Alifd Next library
const script = document.createElement('script');
script.src = 'https://cdn.cdnhub.io/alifd__next/1.27.7/next.min.js';
document.head.appendChild(script);

// Wait for the library to be loaded
script.onload = () => {
  // Use Alifd Next components
  Alifd.use(Alifd.grid, Alifd.pagination, Alifd.button);

  // Create a grid component
  const grid = new Alifd.grid('grid-container', {
    columns: [
      { title: 'Name', dataIndex: 'name' },
      { title: 'Age', dataIndex: 'age' },
      { title: 'City', dataIndex: 'city' },
    ],
    data: [
      { name: 'John Doe', age: 25, city: 'New York' },
      { name: 'Jane Doe', age: 30, city: 'Los Angeles' },
      { name: 'Bob Smith', age: 45, city: 'Chicago' },
    ],
  });

  // Create a pagination component
  const pagination = new Alifd.pagination('pagination-container', {
    total: 100, // Total number of records
    pageSize: 20, // Number of records per page
    current: 1, // Current page number
    onChange: (pageNumber) => {
      console.log('Page changed to:', pageNumber);
    },
  });

  // Create a button component
  const button = new Alifd.button('button-container', 'Load More');
  button.on('click', () => {
    console.log('Button clicked');
    // Fetch more data from the server and update the grid component
  });
};

Select version:

https://cdn.cdnhub.io/alifd__next/1.27.17/adaptor.min.js Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.min-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.min-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.min-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.min-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.min-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.min-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.min-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.min-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-noreset.var.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-with-locales.js Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next-with-locales.min.js Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.js Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.min.js Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.min-1.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.min-1.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.min-2.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.min-2.min.css Copied!

https://cdn.cdnhub.io/alifd__next/1.27.17/next.var.min.css Copied!

All versions

1.19.32 1.19.32-beta 1.19.33 1.19.33-beta.0 1.20.0 1.20.0-beta 1.20.0-beta.2 1.20.0-beta.3 1.20.0-beta.4 1.20.0-beta.5 1.20.0-beta.6 1.20.0-beta.7 1.20.0-beta.8 1.20.1 1.20.1-beta 1.20.10 1.20.11 1.20.13 1.20.14 1.20.15 1.20.16 1.20.17 1.20.18 1.20.19 1.20.2 1.20.20 1.20.21 1.20.21-alpha 1.20.22 1.20.23 1.20.24 1.20.25 1.20.26 1.20.27 1.20.28 1.20.29-beta 1.20.3 1.20.4 1.20.5 1.20.6 1.20.7 1.20.7-beta 1.20.8 1.20.9 1.21.0 1.21.0-alpha 1.21.0-alpha.2 1.21.0-alpha.3 1.21.0-beta.2 1.21.0-beta.3 1.21.0-beta.4 1.21.0-beta.5 1.21.0-beta.6 1.21.0-beta.7 1.21.0-beta.8 1.21.1 1.21.1-beta 1.21.10 1.21.11 1.21.12 1.21.13 1.21.14 1.21.15 1.21.16 1.21.2 1.21.3 1.21.3-alpha 1.21.3-alpha.2 1.21.4 1.21.4-alpha 1.21.5 1.21.6 1.21.6-alpha 1.21.7 1.21.7-beta 1.21.8 1.21.8-alpha 1.21.9 1.22.0 1.22.0-beta 1.22.0-beta.1 1.22.0-beta.2 1.22.0-beta.3 1.22.0-beta.4 1.22.0-beta.5 1.22.0-beta.6 1.22.1 1.22.10 1.22.11 1.22.12 1.22.13 1.22.14 1.22.15 1.22.16 1.22.16-beta 1.22.17 1.22.18 1.22.19 1.22.2 1.22.20 1.22.21 1.22.22 1.22.23 1.22.24 1.22.25 1.22.26 1.22.3 1.22.4 1.22.5 1.22.6 1.22.7 1.22.8 1.22.9 1.23.0 1.23.0-beta 1.23.0-beta.1 1.23.0-beta.2 1.23.0-beta.3 1.23.0-beta.4 1.23.0-beta.5 1.23.0-beta.7 1.23.0-betea.6 1.23.1 1.23.10 1.23.11 1.23.12 1.23.13 1.23.14 1.23.15 1.23.16 1.23.17 1.23.18 1.23.19 1.23.2 1.23.20 1.23.21 1.23.22 1.23.22-beta 1.23.23 1.23.24 1.23.25 1.23.3 1.23.3-alpha 1.23.3-alpha.2 1.23.4 1.23.4-beta 1.23.5 1.23.5-beta 1.23.6 1.23.7 1.23.8 1.23.9 1.24.0 1.24.0-beta 1.24.0-beta.1 1.24.0-beta.2 1.24.0-beta.3 1.24.0-beta.4 1.24.0-beta.5 1.24.1 1.24.10 1.24.11 1.24.12 1.24.13 1.24.13-beta 1.24.14 1.24.15 1.24.16 1.24.17 1.24.18 1.24.2 1.24.3 1.24.4 1.24.5 1.24.6 1.24.7 1.24.8 1.24.9 1.25.0 1.25.1 1.25.10 1.25.11 1.25.12 1.25.13 1.25.14 1.25.15 1.25.16 1.25.17 1.25.18 1.25.19 1.25.2 1.25.20 1.25.21 1.25.22 1.25.23 1.25.23-beta.1 1.25.24 1.25.25 1.25.26 1.25.27 1.25.28 1.25.29 1.25.3 1.25.30 1.25.31 1.25.32 1.25.33 1.25.33-beta 1.25.34 1.25.35 1.25.36 1.25.37 1.25.38 1.25.39 1.25.39-beta 1.25.4 1.25.40 1.25.41 1.25.42 1.25.43 1.25.44 1.25.45 1.25.46 1.25.47 1.25.48 1.25.49 1.25.5 1.25.50 1.25.51 1.25.6 1.25.7 1.25.8 1.25.9 1.26.0 1.26.0-beta 1.26.0-beta.2 1.26.0-beta.3 1.26.0-beta.4 1.26.0-beta.5 1.26.0-beta.6 1.26.0-beta.7 1.26.0-beta.8 1.26.1 1.26.10 1.26.11 1.26.12 1.26.13 1.26.13-beta 1.26.14 1.26.15 1.26.16 1.26.17 1.26.18 1.26.19 1.26.2 1.26.20 1.26.21 1.26.22 1.26.23 1.26.24 1.26.25 1.26.26 1.26.27 1.26.27-alpha.0 1.26.27-alpha.1 1.26.27-alpha.2 1.26.28 1.26.29 1.26.3 1.26.30 1.26.31 1.26.32 1.26.33 1.26.34 1.26.35 1.26.36 1.26.37 1.26.4 1.26.4-beta 1.26.5 1.26.6 1.26.7 1.26.8 1.26.9 1.27.0 1.27.0-alpha.0 1.27.0-alpha.1 1.27.0-alpha.2 1.27.0-beta 1.27.1 1.27.1-alpha.0 1.27.1-alpha.1 1.27.10 1.27.11 1.27.12 1.27.13 1.27.14 1.27.15 1.27.16 *** 1.27.17 1.27.2 1.27.3 1.27.4 1.27.5 1.27.5-beta.0 1.27.5-beta.1 1.27.6 1.27.7 1.27.8 1.27.9