Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 55 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,60 @@
# Getting Started with the Vue Speed Dial Component
A quick start Vue project that shows how to add the Vue Speed Dial component to a Vue application. It shows how to integrate the speed dial into the vue grid. It also shows how to customize the position, direction and display mode of the speed dial.

Refer to the following documentation to learn about the Vue Speed Dial component:
https://ej2.syncfusion.com/vue/documentation/speed-dial/vue-3-getting-started
# getting-started-with-the-vue-speed-dial-component
The [Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples) component is an extension of the Vue Floating Action Button that displays a list of action buttons when clicked. A quick start Vue project that shows how to add the Vue Speed Dial component to a Vue application. It shows how to integrate the speed dial into the vue grid. It also shows how to customize the position, direction and display mode of the speed dial.

Check out this online example of the Vue Speed Dial Component:
https://ej2.syncfusion.com/vue/demos/#/material3/speed-dial/default.html
## Project prerequisites

Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.

### How to run this application?
To run this application, you need to clone the `getting-started-with-the-vue-speed-dial-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

To run this application, you need to clone the `getting-started-with-the-vue-date-speed-dial` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm run serve` command.

## Features and Benefits

### Display modes

The Vue Speed Dial component supports the display of action items in a linear or radial layout. This helps make actions more accessible and easy to use.

### Icon with text

The [Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples) component enables customization of the Speed Dial button and action items, including the use of text only, icon with text, or icon only. This allows developers to create highly personalized buttons and action items that effectively communicate the actions they perform.

### Templates

Customize the default appearance of the Speed Dial and its action items. By using item and popup templates, a highly personalized Speed Dial can be created, which enhances the user experience.

### Built-in themes

The [Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples) supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize one of these built-in themes or create new themes to achieve their desired look and feel by simply overriding SASS variables or using our Theme Studio application.

## Related links
[Learn More about Vue Speed Dial](https://www.syncfusion.com/vue-components/vue-speed-dial?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Documentation](https://ej2.syncfusion.com/vue/documentation/speed-dial/getting-started?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-vue-speed-dial-component?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Community Forums](https://www.syncfusion.com/forums/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

[Online example](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/speed-dial/default.html?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)

## About Syncfusion Vue Components

Syncfusion's [Vue Components](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples) library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Speed Dial, we provide popular Vue Components such as [Charts](https://www.syncfusion.com/vue-components/vue-charts?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Grid](https://www.syncfusion.com/vue-components/vue-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Scheduler](https://www.syncfusion.com/vue-components/vue-scheduler?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Diagram](https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), and [Word Processor](https://www.syncfusion.com/vue-components/vue-word-processor?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples).

### About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:sales@syncfusion.com?Subject=Syncfusion Vue Speed Dial - GitHub" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=vue-speed-dial-github-samples)">www.syncfusion.com</a> | Toll Free: 1-888-9 DOTNET <br>
</p>