ant SaR Template

Installation

Note: Things to do before starting

Tailwindcss codes

CDN links

Add the Play CDN script to your HTML Add the Play CDN script tag to the head of your HTML file, and start using Tailwind’s utility classes to style your content.

CDN

tailwindcss config

Bootstrap codes

CDN links

As reference, here are our primary CDN links. You can also use the CDN to fetch any of our.

Description URL

CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

CDN

Bootstrap cdn

Note: This code will be placed below the title.
Font Awesome is a popular icon library that provides a wide range of scalable vector icons, which can be used in web and mobile applications. It allows developers to include icons in their projects easily without needing to create or customize them from scratch. These icons are vector-based, meaning they can scale to any size without losing quality.

CDN

fonr awesome

CDN

fonr awesome

Note: This code is placed inside the extend in the tailwindcss.config.js file.
The tailwind.config.js file is the configuration file for Tailwind CSS. It allows developers to customize and extend Tailwind's default settings to suit the specific needs of a project. This file is automatically generated when you initialize Tailwind CSS using the command:

Buttons

Note: To copy an element, simply click on it.

Tailwindcss codes

Examples

Normal

Through the type syntactic sugar, use the preset button styles: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.

1. To copy an element, simply click on it.

Loading refers to the process during which a system (such as a website, app, or software) is performing tasks like fetching, processing, or rendering data.

Loading

A loading indicator can be added to a button by setting the loading property on the Button.

1. To copy an element, simply click on it.

Icon

You can add an icon using the icon property.

1. To copy an element, simply click on it.

Download

Ant Design supports three sizes of buttons: small, default and large. If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.

1. To copy an element, simply click on it.

Disabled

To mark a button as disabled, add the disabled property to the Button.

1. To copy an element, simply click on it.



  • 1 Item
  • 2 Item
  • 3 Item

Multiple_Buttons

If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a Dropdown.Button.

1. To copy an element, simply click on it.

Block_Buttons

The block property will make a button fit to its parent width.

1. To copy an element, simply click on it.

Link_Buttons

This is a set of animation-based buttons

1. To copy an element, simply click on it.

Menu_Buttons

This place also contains menu-related codes and animation menus.

1. To copy an element, simply click on it.

Off_Loading

These buttons are in the boot state when pressed. The buttons are in the off state.

1. To copy an element, simply click on it.

Danger_Buttons

The danger is a property of buttons after antd 4.0.

1. To copy an element, simply click on it.

Bootstrap codes

Examples

Button_Tags

The .btn classes are designed to be used with the button element. However, you can also use these classes on a or input elements (though some browsers may apply a slightly different rendering).

1. To copy an element, simply click on it.

Spinners

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

1. To copy an element, simply click on it.

Search

You can add an icon using the bootstrap Icon property.

1. To copy an element, simply click on it.

Download

If you want to download and examine our examples, you can grab the already built examples:

1. To copy an element, simply click on it.

Variants

Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.

1. To copy an element, simply click on it.

Outline_Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

1. To copy an element, simply click on it.

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

1. To copy an element, simply click on it.

Some placeholder content for the collapse component.
Some placeholder content for the collapse component.

Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

1. To copy an element, simply click on it.

Block

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

1. To copy an element, simply click on it.

Inputs

Note: To copy an element, simply click on it.

Tailwindcss codes

Bootstrap codes

Dropdown

Note: To copy an element, simply click on it.

Tailwindcss codes

Bootstrap codes

Menu

Note: To copy an element, simply click on it.

Tailwindcss codes

Bootstrap codes