Added container, sample.json, updated readme

This commit is contained in:
Hugo Bernier 2024-09-28 20:48:16 -04:00
parent 091c0bdd79
commit 06cd3cb508
4 changed files with 133 additions and 20 deletions

View File

@ -0,0 +1,38 @@
{
"name": "SPFx 1.19.0",
"image": "docker.io/m365pnp/spfx:1.19.0",
"customizations": {
"vscode": {
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
]
}
},
"forwardPorts": [
4321,
35729,
5432
],
"portsAttributes": {
"4321": {
"protocol": "https",
"label": "Manifest",
"onAutoForward": "silent",
"requireLocalPort": true
},
"5432": {
"protocol": "https",
"label": "Workbench",
"onAutoForward": "silent"
},
"35729": {
"protocol": "https",
"label": "LiveReload",
"onAutoForward": "silent",
"requireLocalPort": true
}
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}

View File

@ -0,0 +1,33 @@
echo
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
npm install
## commands to create dev certificate and copy it to the root folder of the project
echo
echo -e "\e[1;94mGenerating dev certificate\e[0m"
gulp trust-dev-cert
# Convert the generated PEM certificate to a CER certificate
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
# Copy the PEM ecrtificate for non-Windows hosts
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
## add *.cer to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.cer' ./.gitignore
then
echo "# .CER Certificates" >> .gitignore
echo "*.cer" >> .gitignore
fi
## add *.pem to .gitignore to prevent certificates from being saved in repo
if ! grep -Fxq '*.pem' ./.gitignore
then
echo "# .PEM Certificates" >> .gitignore
echo "*.pem" >> .gitignore
fi
echo
echo -e "\e[1;92mReady!\e[0m"
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

View File

@ -65,28 +65,20 @@ Version|Date|Comments
This web part offers the following enhanced configuration options:
Basic configuration options:
- **Label**: Customize the button text
- **Link**: Specify the URL to link to
- **Link Behaviour**: Configure how the button link opens (e.g., same tab, new tab)
- **Button Alignment**: Align the button horizontally (left, center, right)
- **Width**: Customize the button width
- **Height**: Adjust the button height
- **Border Radius**: Set the corner roundness of the button
* **Label**: Customize the button text
* **Link**: Specify the URL to link to
* **Link Behaviour**: Configure how the button link opens (e.g., same tab, new tab)
* **Button Alignment**: Align the button horizontally (left, center, right)
* **Width**: Customize the button width
* **Height**: Adjust the button height
* **Border Radius**: Set the corner roundness of the button
Advanced configuration options:
- **Container Styles**: Apply custom styles to the button container using raw CSS value
- **Button Styles**: Customize the button's appearance using raw CSS value
- **Button Hover Styles**: Define styles for when users hover over the button using raw CSS value
<!--
RESERVED FOR REPO MAINTAINERS
We'll add the video from the community call recording here
## Video
[![YouTube video title](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=XXXXX "YouTube video title")
-->
* **Container Styles**: Apply custom styles to the button container using raw CSS value
* **Button Styles**: Customize the button's appearance using raw CSS value
* **Button Hover Styles**: Define styles for when users hover over the button using raw CSS value
## Help
@ -108,4 +100,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-enhanced-button" />
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-enhanced-button" />

View File

@ -0,0 +1,50 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-enhanced-button",
"source": "pnp",
"title": "Enhanced Button",
"shortDescription": "Extends the functionality of the native button web part.",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-button",
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-button",
"longDescription": [
"The Enhanced Button Web Part is a custom SharePoint web part that extends the functionality of the native button web part. It provides additional configuration options to create more customizable and flexible buttons within your SharePoint pages."
],
"creationDateTime": "2024-09-01",
"updateDateTime": "2024-09-01",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.19.0"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-button/assets/app.jpeg",
"alt": "Web Part Preview"
}
],
"authors": [
{
"gitHubAccount": "AriGunawan",
"pictureUrl": "https://github.com/AriGunawan.png",
"name": "Ari Gunawan"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]