restore files that should have been unchanged
This commit is contained in:
REDMOND\krsiler
Родитель
46aca61daa
Коммит
e913c95440
|
|
@ -1,59 +1,59 @@
|
|||
# Component Name: Checkbox
|
||||
|
||||
## Purpose:
|
||||
The goal of this Checkbox component is to allows users to switch between two mutually exclusive options (checked or unchecked,
|
||||
on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.
|
||||
|
||||
## Do's:
|
||||
- Allow users to choose any combination of options when several Checkboxes are grouped together.
|
||||
|
||||
## Don't:
|
||||
- Don't use a Checkbox as an on/off control. Instead use a toggle switch.
|
||||
- Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead.
|
||||
- Don't put two groups of Checkboxes next to each other. Separate the two groups with labels.
|
||||
|
||||
## Sample Code:
|
||||
```
|
||||
<Checkbox label="This is the label (uncontrolled)" onChange={onChange} defaultChecked={false} />
|
||||
<Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
|
||||
```
|
||||
|
||||
## Tokens:
|
||||
Checkbox supports the following tokens:
|
||||
1. checkboxBackgroundColor – This changes the background color of the Checkbox.
|
||||
2. checkboxBorderColor – This changes the border color of the Checkbox.
|
||||
3. checkmarkColor – This changes the color of Checkmark.
|
||||
4. borderRadius - This changes the border radius of the Checkbox (use this to create a circular checkbox)
|
||||
|
||||
## Token Usage Example:
|
||||
Circular Checkbox: We use "borderRadius=7" right now because we currently don't support % for borderRadius. The checkbox
|
||||
size is currently 14x14, so 7 is 50%. We have a task to allow for %'s.
|
||||
```
|
||||
const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 7 } });
|
||||
```
|
||||
|
||||
Checkbox with white background (when unchecked):
|
||||
```
|
||||
const WhiteCheckbox = Checkbox.customize({ tokens: { backgroundColor: 'white' } });
|
||||
```
|
||||
|
||||
Circular Color-Customized Checkbox - (Green background + green border + white checkmark) when Checked.
|
||||
```
|
||||
const CircleColorCheckbox = Checkbox.customize({
|
||||
tokens: { borderRadius: 7 },
|
||||
_overrides: {
|
||||
checked: {
|
||||
tokens: {
|
||||
checkboxBackgroundColor: 'green',
|
||||
checkboxBorderColor: 'green',
|
||||
checkmarkColor: 'white'
|
||||
}
|
||||
},
|
||||
focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
|
||||
hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
|
||||
pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } }
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
# Component Name: Checkbox
|
||||
|
||||
## Purpose:
|
||||
The goal of this Checkbox component is to allows users to switch between two mutually exclusive options (checked or unchecked,
|
||||
on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.
|
||||
|
||||
## Do's:
|
||||
- Allow users to choose any combination of options when several Checkboxes are grouped together.
|
||||
|
||||
## Don't:
|
||||
- Don't use a Checkbox as an on/off control. Instead use a toggle switch.
|
||||
- Don’t use a Checkbox when the user can choose only one option from the group, use radio buttons instead.
|
||||
- Don't put two groups of Checkboxes next to each other. Separate the two groups with labels.
|
||||
|
||||
## Sample Code:
|
||||
```
|
||||
<Checkbox label="This is the label (uncontrolled)" onChange={onChange} defaultChecked={false} />
|
||||
<Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
|
||||
```
|
||||
|
||||
## Tokens:
|
||||
Checkbox supports the following tokens:
|
||||
1. checkboxBackgroundColor – This changes the background color of the Checkbox.
|
||||
2. checkboxBorderColor – This changes the border color of the Checkbox.
|
||||
3. checkmarkColor – This changes the color of Checkmark.
|
||||
4. borderRadius - This changes the border radius of the Checkbox (use this to create a circular checkbox)
|
||||
|
||||
## Token Usage Example:
|
||||
Circular Checkbox: We use "borderRadius=7" right now because we currently don't support % for borderRadius. The checkbox
|
||||
size is currently 14x14, so 7 is 50%. We have a task to allow for %'s.
|
||||
```
|
||||
const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 7 } });
|
||||
```
|
||||
|
||||
Checkbox with white background (when unchecked):
|
||||
```
|
||||
const WhiteCheckbox = Checkbox.customize({ tokens: { backgroundColor: 'white' } });
|
||||
```
|
||||
|
||||
Circular Color-Customized Checkbox - (Green background + green border + white checkmark) when Checked.
|
||||
```
|
||||
const CircleColorCheckbox = Checkbox.customize({
|
||||
tokens: { borderRadius: 7 },
|
||||
_overrides: {
|
||||
checked: {
|
||||
tokens: {
|
||||
checkboxBackgroundColor: 'green',
|
||||
checkboxBorderColor: 'green',
|
||||
checkmarkColor: 'white'
|
||||
}
|
||||
},
|
||||
focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
|
||||
hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
|
||||
pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } }
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
# Button Documentation
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import * as React from 'react';
|
||||
import { Button, View } from '@fluentui/react-native';
|
||||
|
||||
export const ButtonExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<View>
|
||||
<Button content="Save" onClick={_alertClicked} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
function _alertClicked(): void {
|
||||
alert('Clicked');
|
||||
}
|
||||
```
|
||||
# Button Documentation
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import * as React from 'react';
|
||||
import { Button, View } from '@fluentui/react-native';
|
||||
|
||||
export const ButtonExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<View>
|
||||
<Button content="Save" onClick={_alertClicked} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
function _alertClicked(): void {
|
||||
alert('Clicked');
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
# Link
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import * as React from 'react';
|
||||
import * as ReactNative from 'react-native';
|
||||
import { Stack } from '../components';
|
||||
import { Link } from '../components/Link/Link.win32';
|
||||
import { stackStyle } from './TesterStyles';
|
||||
|
||||
export const LinkTest: React.FunctionComponent<{}> = () => {
|
||||
const doPress = () => {
|
||||
ReactNative.Alert.alert('Alert.', 'You have been alerted.');
|
||||
};
|
||||
return (
|
||||
<Stack style={stackStyle}>
|
||||
<Link url="https://www.bing.com/" content="Click to open the URL." />
|
||||
<Link onPress={doPress} content="Click to activate the onPress event." />
|
||||
<Link url="https://www.google.com/" content="This link is disabled." disabled />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
# Link
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import * as React from 'react';
|
||||
import * as ReactNative from 'react-native';
|
||||
import { Stack } from '../components';
|
||||
import { Link } from '../components/Link/Link.win32';
|
||||
import { stackStyle } from './TesterStyles';
|
||||
|
||||
export const LinkTest: React.FunctionComponent<{}> = () => {
|
||||
const doPress = () => {
|
||||
ReactNative.Alert.alert('Alert.', 'You have been alerted.');
|
||||
};
|
||||
return (
|
||||
<Stack style={stackStyle}>
|
||||
<Link url="https://www.bing.com/" content="Click to open the URL." />
|
||||
<Link onPress={doPress} content="Click to activate the onPress event." />
|
||||
<Link url="https://www.google.com/" content="This link is disabled." disabled />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
# Component Name: RadioGroup
|
||||
|
||||
## Purpose
|
||||
The goal of this RadioGroup component is to let users select one option from two or more choices. Each option is represented by one RadioButton component, and the group of RadioButton’s is represented by a RadioGroup component. A user can only select one RadioButton in a RadioGroup.
|
||||
|
||||
## Do's:
|
||||
- Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
|
||||
- Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
|
||||
- List the options in a logical order, such as most likely to be selected least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
|
||||
- If none of the options is a valid choice, add another option to reflect this choice, such as “None” or “Does not apply”.
|
||||
- Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren’t factors, select the most likely or convenient option.
|
||||
- Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
|
||||
|
||||
## Don't:
|
||||
- Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider component instead.
|
||||
- Use if there are more than 7 options, use a Dropdown instead.
|
||||
- Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
|
||||
|
||||
## Sample Code:
|
||||
```jsx
|
||||
<RadioGroup label="This is a test RadioGroup" defaultSelectedKey="A">
|
||||
<RadioButton content="Option A" buttonKey="A" />
|
||||
<RadioButton content="Option B" buttonKey="B" />
|
||||
<RadioButton content="Option C" buttonKey="C" disabled={true} />
|
||||
<RadioButton content="Option D" buttonKey="D" />
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
## Tokens:
|
||||
RadioButton supports the following tokens:
|
||||
1. borderColor – This changes the border color of the RadioButton.
|
||||
2. backgroundColor – This changes the background color of the inner circle of the RadioButton.
|
||||
3. color – This changes the text color of the label associated with the RadioButton.
|
||||
|
||||
RadioGroup supports the following tokens:
|
||||
1. fontFamily - Changes the font family of the label associated with the RadioGroup.
|
||||
2. fontSize - Changes the font size of the label associated with the RadioGroup.
|
||||
3. fontWeight - Changes the font weight of the label associated with the RadioGroup.
|
||||
4. color - This changes the text color of the label associated with the RadioGroup.
|
||||
# Component Name: RadioGroup
|
||||
|
||||
## Purpose
|
||||
The goal of this RadioGroup component is to let users select one option from two or more choices. Each option is represented by one RadioButton component, and the group of RadioButton’s is represented by a RadioGroup component. A user can only select one RadioButton in a RadioGroup.
|
||||
|
||||
## Do's:
|
||||
- Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list.
|
||||
- Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable.
|
||||
- List the options in a logical order, such as most likely to be selected least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable.
|
||||
- If none of the options is a valid choice, add another option to reflect this choice, such as “None” or “Does not apply”.
|
||||
- Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren’t factors, select the most likely or convenient option.
|
||||
- Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize.
|
||||
|
||||
## Don't:
|
||||
- Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a slider component instead.
|
||||
- Use if there are more than 7 options, use a Dropdown instead.
|
||||
- Nest with other RadioGroup or Checkboxes. If possible, keep all the options at the same level.
|
||||
|
||||
## Sample Code:
|
||||
```jsx
|
||||
<RadioGroup label="This is a test RadioGroup" defaultSelectedKey="A">
|
||||
<RadioButton content="Option A" buttonKey="A" />
|
||||
<RadioButton content="Option B" buttonKey="B" />
|
||||
<RadioButton content="Option C" buttonKey="C" disabled={true} />
|
||||
<RadioButton content="Option D" buttonKey="D" />
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
## Tokens:
|
||||
RadioButton supports the following tokens:
|
||||
1. borderColor – This changes the border color of the RadioButton.
|
||||
2. backgroundColor – This changes the background color of the inner circle of the RadioButton.
|
||||
3. color – This changes the text color of the label associated with the RadioButton.
|
||||
|
||||
RadioGroup supports the following tokens:
|
||||
1. fontFamily - Changes the font family of the label associated with the RadioGroup.
|
||||
2. fontSize - Changes the font size of the label associated with the RadioGroup.
|
||||
3. fontWeight - Changes the font weight of the label associated with the RadioGroup.
|
||||
4. color - This changes the text color of the label associated with the RadioGroup.
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
# Separator
|
||||
|
||||
## Horizontal Example
|
||||
```
|
||||
import { ISeparator, Separator, Stack, Text } from '@fluentui/react-native';
|
||||
|
||||
const stackStyle: IStackProps['style'] = {
|
||||
borderWidth: 1,
|
||||
borderColor: '#bdbdbd',
|
||||
padding: 8,
|
||||
margin: 8
|
||||
};
|
||||
|
||||
export const SeparatorExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<Stack style={ stackStyle } gap={ 5 }>
|
||||
<Text>This is a text element</Text>
|
||||
<Separator />
|
||||
<Text>This is a longer text element</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Vertical Example
|
||||
```
|
||||
import { ISeparator, Separator, Stack } from '@fluentui/react-native';
|
||||
|
||||
const separatorStackStyle: IStackProps['style'] = {
|
||||
height: 200,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-evenly'
|
||||
};
|
||||
|
||||
export const SeparatorExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<Stack gap={ 4 } style={ separatorStackStyle }>
|
||||
<Text>Text 1</Text>
|
||||
<Separator color="blue" vertical />
|
||||
<Text>Text 2</Text>
|
||||
<Separator color="red" vertical />
|
||||
<Text>Text 3</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
# Separator
|
||||
|
||||
## Horizontal Example
|
||||
```
|
||||
import { ISeparator, Separator, Stack, Text } from '@fluentui/react-native';
|
||||
|
||||
const stackStyle: IStackProps['style'] = {
|
||||
borderWidth: 1,
|
||||
borderColor: '#bdbdbd',
|
||||
padding: 8,
|
||||
margin: 8
|
||||
};
|
||||
|
||||
export const SeparatorExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<Stack style={ stackStyle } gap={ 5 }>
|
||||
<Text>This is a text element</Text>
|
||||
<Separator />
|
||||
<Text>This is a longer text element</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Vertical Example
|
||||
```
|
||||
import { ISeparator, Separator, Stack } from '@fluentui/react-native';
|
||||
|
||||
const separatorStackStyle: IStackProps['style'] = {
|
||||
height: 200,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-evenly'
|
||||
};
|
||||
|
||||
export const SeparatorExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<Stack gap={ 4 } style={ separatorStackStyle }>
|
||||
<Text>Text 1</Text>
|
||||
<Separator color="blue" vertical />
|
||||
<Text>Text 2</Text>
|
||||
<Separator color="red" vertical />
|
||||
<Text>Text 3</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
# FocusTrapZone Documentation
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import { IFocusTrapZoneProps, FocusTrapZone, Button } from '@fluentui/react-native';
|
||||
|
||||
const activeTrapZoneStyle: IFocusTrapZoneProps['style'] = {
|
||||
borderWidth: 2,
|
||||
borderColor: '#ababab',
|
||||
borderStyle: 'solid',
|
||||
padding: 10
|
||||
}
|
||||
|
||||
export const FocusTrapZoneExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<FocusTrapZone style={activeTrapZoneStyle}>
|
||||
<Button content="Button 1" />
|
||||
<Button content="Button 2" />
|
||||
<Button content="Button 3" />
|
||||
</FocusTrapZone>
|
||||
);
|
||||
};
|
||||
```
|
||||
# FocusTrapZone Documentation
|
||||
|
||||
## Example
|
||||
|
||||
```
|
||||
import { IFocusTrapZoneProps, FocusTrapZone, Button } from '@fluentui/react-native';
|
||||
|
||||
const activeTrapZoneStyle: IFocusTrapZoneProps['style'] = {
|
||||
borderWidth: 2,
|
||||
borderColor: '#ababab',
|
||||
borderStyle: 'solid',
|
||||
padding: 10
|
||||
}
|
||||
|
||||
export const FocusTrapZoneExample: React.FunctionComponent<{}> = props => {
|
||||
return (
|
||||
<FocusTrapZone style={activeTrapZoneStyle}>
|
||||
<Button content="Button 1" />
|
||||
<Button content="Button 2" />
|
||||
<Button content="Button 3" />
|
||||
</FocusTrapZone>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# Pressable
|
||||
|
||||
### Not Yet Implemented
|
||||
# Pressable
|
||||
|
||||
### Not Yet Implemented
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# Stack
|
||||
|
||||
### Not Yet Implemented
|
||||
# Stack
|
||||
|
||||
### Not Yet Implemented
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React, { useState } from 'react';
|
||||
|
||||
export const Counter = function() {
|
||||
// Declare a new state variable, which we'll call "count"
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>You clicked {count} times</p>
|
||||
<button onClick={() => setCount(count + 1)}>Click me</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Counter;
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export const Counter = function() {
|
||||
// Declare a new state variable, which we'll call "count"
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>You clicked {count} times</p>
|
||||
<button onClick={() => setCount(count + 1)}>Click me</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Counter;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ export const settings: IComposeSettings<ITextType> = [
|
|||
{
|
||||
tokens: {
|
||||
fontFamily: 'primary',
|
||||
fontSize: 'secondary',
|
||||
fontWeight: 'regular',
|
||||
fontSize: 'medium',
|
||||
fontWeight: 'medium',
|
||||
color: 'bodyText'
|
||||
},
|
||||
root: {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче