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

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
  });
};
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
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.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