Added container, sample.json, updated readme
This commit is contained in:
Hugo Bernier
parent
091c0bdd79
commit
06cd3cb508
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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**********"
|
||||
|
|
@ -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
|
||||
|
||||
[](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" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue